Nerdy People Matriculate

    TypeScript icon, indicating that this package has built-in type declarations

    0.0.16 • Public • Published

    React in Angular and Angular in React

    This is a small Angular library that lets you use React components inside Angular projects.

    <react-wrapper [component]="Button" [props]="{ children: 'Hello world!' }">
    function ReactComponent({ text }) {
      return <AngularWrapper component={TextComponent} inputs={{ text }}>


    npm i @bubblydoo/angular-react
    import { AngularReactModule } from '@bubblydoo/react-angular'
      imports: [



    Use this component when you want to use React in Angular.

    It takes two inputs:

    • component: A React component
    • props?: The props you want to pass to the React component

    The React component will be first rendered on ngAfterViewInit and rerendered on every ngOnChanges call.

    import Button from './button.tsx';
      template: `<react-wrapper [component]="Button" [props]="{ children: 'Hello world!' }">`
    class AppComponent {
      Button = Button


    Use this component when you want to use Angular in React.

    It takes a few inputs:

    • component: An Angular component
    • inputs?: The inputs you want to pass to the Angular component, in an object
    • outputs?: The outputs you want to pass to the Angular component, in an object
    • events?: The events from the Angular component to listen to, using addEventListener. Event handlers are wrapped in
    • ref?: The ref to the rendered DOM element (uses React.forwardRef)
    import { TextComponent } from './text/text.component.ts'
    function Text(props) {
      return (
          inputs={{ text: props.text }}
          events={{ click: () => console.log('clicked') }}/>


    The Angular Injector is provided on each React component by default using React Context. You can use Angular services and other injectables with it:

    import { useInjected } from '@bubblydoo/react-angular'
    const authService = useInjected(AuthService)


    Because consuming observables is so common, we added a helper hook for it:

    import { useObservable, useInjected } from '@bubblydoo/react-angular'
    function LoginStatus() {
      const authService = useInjected(AuthService)
      const [value, error, completed] = useObservable(authService.isAuthenticated$)
      if (error) return <>Something went wrong!<>
      return <>{value ? "Logged in!" : "Not logged in"}</>

    Global React Context

    Because this library creates a different ReactDOM root for each react-wrapper, if you want to have a global React Context, you can register it as follows:

    // app.component.ts
    constructor(angularReact: AngularReactService) {
      const client = new ApolloClient();
      // equivalent to ({ children }) => <ApolloProvider client={client}>{children}</ApolloProvider>
      angularReact.wrappers.push(({ children }) => React.createElement(ApolloProvider, { client, children }));

    In this example, we use ApolloProvider to provide a client to each React element. We can then use useQuery in all React components.


    You can test the functionality of the components inside a local Storybook:

    npm run storybook

    If you want to use your local build in an Angular project, you'll need to build it:

    npm run build

    Then, use npm link:

    cd dist/angular-react
    npm link # this will link @bubblydoo/angular-react to dist/angular-react

    In your Angular project:

    npm link @bubblydoo/angular-react

    node_modules/@bubblydoo/angular-react will then be symlinked to dist/angular-react.




    npm i @bubblydoo/angular-react

    DownloadsWeekly Downloads






    Unpacked Size

    138 kB

    Total Files


    Last publish


    • siemenvdm
    • izidormaklary
    • oliverobrien
    • hansottowirtz