https://github.com/wandri/angular-with-react-components
Angular with react component
https://github.com/wandri/angular-with-react-components
angular components-react react
Last synced: 5 days ago
JSON representation
Angular with react component
- Host: GitHub
- URL: https://github.com/wandri/angular-with-react-components
- Owner: wandri
- License: mit
- Created: 2023-12-12T14:46:22.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-12-12T16:19:34.000Z (over 2 years ago)
- Last Synced: 2026-04-27T17:31:34.373Z (16 days ago)
- Topics: angular, components-react, react
- Language: TypeScript
- Homepage: https://wandri.github.io/angular-with-react-components/
- Size: 274 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Angular with React components
A live demo is available [here](https://wandri.github.io/angular-with-react-components/)
In order to use a React component, you can follow this implementation of [react-spreadsheet](https://github.com/iddan/react-spreadsheet) example:
1. Install the React packages
```
npm i --save react react-dom
npm i --save-dev @types/react @types/react-dom
```
2. Allow the React files in `tsconfig.json`
```json
{
...
"compilerOptions": {
...
"jsx": "react"
},
...
}
```
3. Create your `ReactSpreadsheet.tsx` file to get the React component
```tsx
import React, {FunctionComponent} from "react";
import Spreadsheet, {CellBase, Props} from "react-spreadsheet";
export const ReactSpreadsheet: FunctionComponent> = (props: Props) => {
return
};
```
4. Create an angular component as container, and switch the extension from `.ts` to `.tsx`
```tsx
import {
AfterViewInit,
Component,
ElementRef,
EventEmitter,
Input,
OnChanges,
OnDestroy,
Output,
ViewChild
} from '@angular/core';
import {createRoot, Root} from "react-dom/client";
import ReactDOM from "react-dom";
import * as React from "react";
import {ReactSpreadsheet} from "./ReactSpreadsheet";
const containerElementRef = "reactComponentContainer"
@Component({
selector: 'app-react-component',
standalone: true,
imports: [],
template: `
`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ReactComponentComponent implements OnChanges, OnDestroy, AfterViewInit {
@ViewChild(containerElementRef, {static: true}) containerRef!: ElementRef;
@Input() data: { value: string }[][] = [];
@Output() public onSelect = new EventEmitter<{ row?: number, column?: number }>();
root?: Root;
constructor() {
this.handleActivate = this.handleActivate.bind(this);
}
public handleActivate(value: { row?: number, column?: number }): void {
if (this.onSelect) {
this.onSelect.emit(value);
this.render();
}
}
ngOnChanges(): void {
this.render();
}
ngAfterViewInit() {
this.root = createRoot(this.containerRef.nativeElement);
this.render();
}
ngOnDestroy() {
ReactDOM.unmountComponentAtNode(this.containerRef.nativeElement);
}
private render() {
if (this.root) {
const {data, handleActivate} = this;
this.root.render(
)
}
}
}
```
5. Use `` wherever you want as a normal angular component.