https://github.com/relliv/angular-reactflow-examples
https://github.com/relliv/angular-reactflow-examples
Last synced: 30 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/relliv/angular-reactflow-examples
- Owner: relliv
- Created: 2022-12-20T03:16:45.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-28T20:12:44.000Z (over 1 year ago)
- Last Synced: 2025-03-31T19:11:08.378Z (2 months ago)
- Language: TypeScript
- Homepage: https://relliv.github.io/angular-reactflow-examples/
- Size: 2.67 MB
- Stars: 3
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# AngularFlow
This project demonstrates how to use [React](https://facebook.github.io/react/) and [Reactflow](https://reactflow.dev/) with [Angular](https://angular.io/). These examples are compatible with Angular 14+ and React 17+. The examples are based on the [Reactflow examples](https://reactflow.dev/examples/).
## React Component Directive
The [react-component](./src/app/react-component.directive.ts) directive allows you to use React components in Angular templates. Logic is handled in the React component, while the Angular template is used to pass data to the React component.
> Warning: This directive is a standalone directive. If you want to use it in your project, you need to modify the code to fit your needs.
## Import Reactflow styles
```scss
@import '@reactflow/core/dist/style.css';
@import '@reactflow/controls/dist/style.css';
@import '@reactflow/minimap/dist/style.css';
```
## React Component Wrapper
Just pass react component and props to the `react-component` directive. The directive will create a wrapper component that will render the react component.
```html
```
## Example Implementation for Older Angular Versions
An example implementation for older Angular versions based [react-component.directive.ts](./src/app/react-component.directive.ts) file.
```ts
import { ApplicationRef, Directive, ElementRef, inject, Injector, Input, OnChanges, OnInit, OnDestroy } from '@angular/core';
import { ComponentProps, createElement, ElementType, React } from 'react';
import { createRoot } from 'react-dom/client';
@Directive({
// eslint-disable-next-line @angular-eslint/directive-selector
selector: '[reactComponent]',
})
export class ReactComponentDirective implements OnChanges, OnDestroy {
@Input() public reactComponent: Comp;
@Input() public props: ComponentProps;
@Input() public children: any;
private root: any;
constructor(private appRef: ApplicationRef, private elementRef: ElementRef) {
this.root = createRoot(this.elementRef.nativeElement);
}
public ngOnChanges(): void {
this.root.render(
createElement(
this.reactComponent,
this.props,
this.children?.map((child: any) =>
createElement(child as React.FC, {
key: child.name,
...child.props,
})
)
)
);
}
public ngOnDestroy(): void {
this.root.unmount();
}
}
```