DEV Community

Suguru Inatomi
Suguru Inatomi

Posted on • Originally published at blog.lacolaco.net on

Angular Elements: Composable Definition Pattern

#angular #angularelements

Assuming a situation we have…

  • An Angular component library project, Lib1Module
  • An Angular Elements library project, Lib1ElementsModule
  • An Angular Elements library project, Lib2ElementsModule which uses Lib1ElementsModule

It can be achieved with loading scripts of both Lib1 and Lib2 separately. But composing multiple Angular Elements definition brings some benefits.

  • Unified Angular bootstrapping (better performance)
  • Single <script> tag in HTML (free from loading order problem)

Creating Lib1ElementsModule 

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

export function defineCustomElements(injector: Injector) {
  customElements.define(
    'lib1-button-element',
    createCustomElement(Lib1ButtonComponent, { injector })
  );
}

@NgModule({
  imports: [Lib1Module],
  // `entryComponents` is not needed if Ivy is enabled
  entryComponents: [Lib1ButtonComponent],
})
export class Lib1ElementsModule {
  constructor(private readonly injector: Injector) {}

  ngDoBootstrap() {
    defineCustomElements(this.injector);
  }
}
Enter fullscreen mode Exit fullscreen mode

To use Lib1ElementsModule , bootstrap it directly. Then ngDoBootstrap() method will be called.

// main.elements.ts
platformBrowserDynamic().bootstrapModule(Lib1ElementsModule);
Enter fullscreen mode Exit fullscreen mode

Creating Lib2ElementsModule

Lib2ElementsModule enables both Lib1 and Lib2 Angular Elements by composition.

import { createCustomElement } from '@angular/elements';
import {
  Lib1ElementsModule,
  defineCustomElements as defineLib1Elements,
} from 'lib1';

export function defineCustomElements(injector: Injector) {
  customElements.define(
    'lib2-card-element',
    createCustomElement(Lib2CardComponent, { injector })
  );
}

@NgModule({
  imports: [Lib2Module, Lib1ElementsModule],
  // `entryComponents` is not needed if Ivy is enabled
  entryComponents: [Lib2CardComponent],
})
export class Lib2ElementsModule {
  constructor(private readonly injector: Injector) {}

  ngDoBootstrap() {
    // Compose definition
    defineLib1Elements(this.injector);
    defineCustomElements(this.injector);
  }
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

slika profile image

Angular project structure: Core Module

Simi Lika -

codewithahsan profile image

Configuring Tailwind CSS for Storybook in an Angular Library inside an NX monorepo

Muhammad Ahsan Ayaz -

pedrobruneli profile image

How to cache requests in Angular

Pedro Bruneli -

kaystar profile image

Angular 17 with clean architecture - Error: Dependency Injection

KayStar NJ4 -