Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use React component in Angular 6 application

I have a few components in react and I want to reuse the same in angular 6 application. Can come some suggest me the best way to do this.

like image 912
Srinivas Sree Avatar asked Mar 29 '19 06:03

Srinivas Sree


People also ask

Can I use React component in Angular?

You are now ready to use the GoodData React Components in your Angular app. You can use wrapped components across your app. You can pass the component props to it and even update them using data-binding.

Can you use React with Hugo?

Hugo, that I use for my static site, does not directly have support for transpiling React. But with a few small steps you can make React transpiling as a part of your Hugo build and use React for your user experiences.

Can a React developer work on Angular?

The simplest way to start a new React project is to use create-react-app, which sets up a React development environment with everything you need to start writing code. With Angular, the Angular CLI is a great tool that helps you create a new Angular app, as well as letting you run, build, test and upgrade your app.

Can you React component without rendering?

TL;DR you can (and should) create React components that render nothing and use them to manage data and state in your app, in order to have components that are reusable and composable for real.


1 Answers

There may be third-party helpers for this purpose but they act the same way, React component is rendered and unmounted when needed:

@ViewChild('container') containerRef: ElementRef;

ngOnInit() {
  ReactDOM.render(<ReactComponent/>, this.containerRef.nativeElement);
}

ngOnDestroy() {
  ReactDOM.unmountComponentAtNode(this.containerRef.nativeElement);
}

React component can interact with Angular component through props.

like image 181
Estus Flask Avatar answered Oct 21 '22 01:10

Estus Flask