I have to add some angular components to angular project and I found this package. I did the following steps:
npm install react2angular react react-dom prop-types --save into the angular project
Add a directory (in the root project) named src and inside it one index.js with the following code:
import { react2angular } from "react2angular";
import React from "react";
function Example() {
return <button type="button">Click me</button>;
}
angular
.module("myModule")
.component("example", react2angular(Example, ["apiUrl", "token"]));
after this I moved in the angular code and I added
<example api-url="123" token="456"/>
Nothing happens. No button appears.
This seems to be made based on the official documentation. Did I do something wrong? Keep in mind that I have no experience with angular, this is why I want to work with react.
1. Create a React component
import React from 'react';
const ReactComponent = ({ fooBar, baz}) => (
<div>
<span>value: {fooBar} </span>
<button onClick={baz}>
Add one
</button>
</div>
);
export default ReactComponent;
2. Expose it to Angular
import { react2angular } from 'react2angular'
angular
.module('myModule', [])
.component('myComponent', react2angular(ReactComponent, ['fooBar', 'baz']))
3. Use it in your Angular 1 code
<my-component
foo-bar="3"
baz="'baz'"
></my-component>
https://stackblitz.com/edit/react2angular-multiple-modules-cg9zaw?file=angular-component.js