Step by Step Guide for create Angular Elements

angular-elements.md

Getting Started

ng new ng-elements --enable-ivy

Create and Build HelloWorldElements

• Remove all the files in src/app folder

• Add hello-world.ts file in src/app folder

• Add Component

  import { Component, ViewEncapsulation, Input } from '@angular/core'
  
  @Component({
    selector: 'hello-world',
    template: `
      <h1>Hello {{ name }}</h1>
    `,
    encapsulation: ViewEncapsulation.ShadowDom
  })
  export class HelloWorldComponent { 
  
    @Input() name: string = 'World'
  
  }

• Add @angular/elements

  ng add @angular/elements
  

• Add Module

  import { Component, ViewEncapsulation, Input, NgModule, Injector } from '@angular/core'
  import { BrowserModule } from '@angular/platform-browser';
  import { createCustomElement } from '@angular/elements';
  
  @Component({
    selector: 'hello-world',
    template: `
      <h1>Hello {{ name }}</h1>
    `,
    encapsulation: ViewEncapsulation.ShadowDom
  })
  export class HelloWorldComponent { 
  
    @Input() name: string = 'World'
  
  }
  
  @NgModule({
    imports: [ BrowserModule ],
    declarations: [ HelloWorldComponent ],
    entryComponents: [ HelloWorldComponent ]
  })
  export class HelloWorldModule {
  
    constructor(injector: Injector) { 
      const HelloWorldElement = createCustomElement(HelloWorldComponent, { injector })
      customElements.define('hello-world', HelloWorldElement)
    }
  
    ngDoBootstrap() { }
  
  }

• update your main.ts

  import { enableProdMode } from '@angular/core';
  import { platformBrowser } from '@angular/platform-browser'
  
  import { HelloWorldModule } from './app/hello-world'
  import { environment } from './environments/environment';
  
  if (environment.production) {
    enableProdMode();
  }
  
  platformBrowser().bootstrapModule(HelloWorldModule)

• Add ngx-build-plus for dependency

  ng add ngx-build-plus@latest
  

• Build hello-world elements

  ng build --prod --single-bundle
  

Consume angular elements in vuejs

• Go to Codesandbox
• Create Vue App
• Select Vue Template to have starter kit
• Upload angular elements files
  • main-es5.xxx
  • main-es2015.xxx
  • scripts.xxx
• add the following in public/index.html as script tag

    <script src="https://unpkg.com/[email protected]/dist/zone.min.js"></script>
    <script src="scripts.xxx.js"></script>
    <script src="main-es2015.xxx.js" type="module"></script>
    <script src="main-es5.xxxx.js" nomodule></script></body>

• Remove the content of template in src/components/HelloWorld.vue

  <template>
    <div class="hello">
  
    </div>
  </template>

• add <hello-name> element as child of div

  <template>
    <div class="hello">
      <hello-name :name="msg"></hello-name>
    </div>
  </template>