[Angular] Angular Elements Intro

Make sure install the latest Angular v6 with Angular CLI. Checkout ght Github for the code.

 

1. Create a new application:

ng new elementApp

 

2. Install @angular/elements package:

ng add @angular/elements --project-name=<your_project_name>

 

3. Generate a component:

ng g c course-title

 

4. Conver the element to angular elements: First we need to add our component to 'entryComponents'

import { BrowserModule } from '@angular/platform-browser'; import { NgModule, Injector } from '@angular/core'; import { createCustomElement } from '@angular/elements'; import { AppComponent } from './app.component'; import { UserPollComponent } from './user-poll/user-poll.component'; @NgModule({ declarations: [ UserPollComponent], entryComponents: [CourseTitleComponent], imports: [BrowserModule] }) export class AppModule { constructor(private injector: Injector) {}  }

 

5. Connect Custom Element Web API inside our component:

// course title

constructor(
   private injector: Injector
)}  

ngOnInit() {
    const htmlElement = createCustomElement(CourseTitleComponent, {injector: this.injector});
    customElements.define('couse-title', htmlElement )
}

　　

 6. Now the Angular Element should already work in the broswer. If we want to use Angular Element inside Angular Application, we should add 'schemas':

@NgModule({ imports: [ CommonModule ], ... schemas: [CUSTOM_ELEMENTS_SCHEMA] })

 

7. If you want to dynamic insert Angular Element into Angular application, such as:

export class AppComponent { addEl() { const container = document.getElementById('container'); container.innerHTML = '<course-title></course-title>'; } }

You need to add polyfill in order to make it work:

npm i --save-dev @webcomponents/webcomponentsjs

Then add into polyfills.js:

.. * APPLICATION IMPORTS */ import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';