Register Angular code components

You can make your Angular components available for drag and drop within Plasmic.

Plasmic’s core code component system supports React first, so your “app host” and your code components must be React. However, you can create simple React wrappers around your Angular components. This is possible because Angular components can be published as normal Web Components aka “custom elements” using @angular/elements.

You can check out the following example as a complete codebase here, or read on for the step by step instructions:

https://github.com/plasmicapp/plasmic/tree/master/examples/angular-components

Step-by-step from scratch

In the following, we’re going to assume you’re using a Next.js app host.

Create a new Angular project:
Copy
```
ng new angular-app
```
Install Angular elements:
Copy
```
ng add @angular/elements
```

Edit src/app/app.module.ts:

Copy

import { DoBootstrap, Injector, NgModule } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule implements DoBootstrap {
  constructor(private injector: Injector) {
    const webComponent = createCustomElement(AppComponent, {
      injector: this.injector
    });
    customElements.define('angular-component', webComponent);
  }

  ngDoBootstrap() {}
}

Build:
Copy
```
ng build
```
Create a React app host, following the instructions here and using create-plasmic-app. We’ll use a Next.js one.
Copy the built files from the Angular app to your React app, in a ng subdirectory. (For a production workflow, you’ll want to automate this process or to publish the components as an npm package.)
Copy
```
cp -r angular-app/dist/nested-app/ react-app/ng/
```

Build the files. For the purposes of this demo, we’ll use the hard-coded hashes. Note that Next.js performs SSR, but the custom elements require Web APIs that are not supported in Node, so we load these components with dynamic imports.

Copy

/** @format */

import React, { useEffect, useState } from 'react';

function AngularTest({ className, message }: { className?: string; message?: string }) {
  const [loaded, setLoaded] = useState(false);
  useEffect(() => {
    (async () => {
      // Do not run these on Next.js server side, since custom elements are not available there.
      // @ts-ignore-next-line
      await import('../ng/runtime.6263bc5acf5b193e');
      // @ts-ignore-next-line
      await import('../ng/polyfills.5cf9041adbc6958d');
      // @ts-ignore-next-line
      await import('../ng/main.ef91450b26733d80');
      setLoaded(true);
    })();
  });
  return (
    <div className={className}>
      {/* @ts-ignore-next-line */}
      {loaded && <angular-component message={message} />}
    </div>
  );
}

export default AngularTest;

Add the code component registration call, with whatever props you need:

Copy

PLASMIC.registerComponent(AngularTest, {
  name: 'AngularTest',
  props: {
    message: 'string'
  }
});

Start the app with:
Copy
```
npm start
```
You can now find and insert your “AngularTest” component from the insertion menu.

Next steps

You can do a couple of things from here on out to make this nicer:

Clean up the publishing / importing from the Angular app into the React app.
Make the wrapper generic so that it can apply across all your Angular components.

We would like to improve future support for Angular components, but for now, if you are needing Angular components in Plasmic, we hope these instructions can unblock you.

Was this page helpful?

Have feedback on this page? Let us know on our forum.