How do you use Angular Elements to create custom web components that can be used outside of Angular applications? — Angular Interview Question #63

Angular Elements allows you to create custom web components from Angular components, which can be used in any web application, whether it’s an Angular app or not. To use Angular Elements, follow these steps:

1. Install Angular Elements and the required dependencies:

You’ll need to install ‘@angular/elements‘ and a custom elements polyfill if you want to ensure compatibility with older browsers (e.g., ‘@webcomponents/custom-elements‘).

ng add @angular/elements
npm install @webcomponents/custom-elements

2. Create an Angular component that you want to expose as a web component:

For example, create a new component called ‘my-widget‘:

ng generate component my-widget

Edit the created component (‘src/app/my-widget/my-widget.component.ts‘), and add any logic or styling that you need.

3. Convert the Angular component to a custom web component:

In your ‘app.module.ts‘, import the ‘createCustomElement‘ function and ‘Injector‘:

import { createCustomElement } from '@angular/elements';
import { Injector } from '@angular/core';

Now create a custom web component by calling ‘createCustomElement‘ with the Angular component and a reference to the app’s injector. To do this, modify the ‘ngDoBootstrap‘ method in ‘app.module.ts‘ as follows:

@NgModule({
  declarations: [
    AppComponent,
    MyWidgetComponent
  ],
  imports: [
    BrowserModule
  ],
  entryComponents: [MyWidgetComponent],
  providers: [],
  bootstrap: []
})
export class AppModule {
  constructor(private injector: Injector) {}

  ngDoBootstrap(): void {
    const myWidgetEl = createCustomElement(MyWidgetComponent, { injector: this.injector });
    customElements.define('my-widget', myWidgetEl);
  }
}

>Note the changes: we’re not bootstrapping the AppComponent (bootstrap: []), instead, we’re manually bootstrapping the application in ‘ngDoBootstrap‘. Also, don’t forget to add the ‘MyWidgetComponent‘ to the ‘entryComponents‘ array.

4. Build and bundle the custom web component

Angular provides a convenient way to build and bundle custom web components using the Angular CLI. Modify ‘angular.json‘, "section:"
projects.YourAppName.architect.build.options"":

"outputPath": "dist/elements",
"main": "src/elements.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": [],
"styles": [],
"scripts": []

Create a new file ‘src/elements.ts‘:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch((err) => console.error(err));

Now build your library:

ng build --prod --output-hashing none

5. Usage in other applications

You can now use the custom web component in any application. Just import the required files and use the custom element:

<!DOCTYPE html>
<html>
<head>
  <script src="elements/runtime.js"></script>
  <script src="elements/polyfills.js"></script>
  <script src="elements/scripts.js"></script>
  <script src="elements/main.js"></script>
</head>
<body>
  <my-widget></my-widget>
</body>
</html>

Now your custom element ‘my-widget‘ can be used outside of Angular applications as well. Just include the required JavaScript files and use the custom element in your HTML.