Creating web component in angular 6 : Angular element

Creating web component in angular 6: Angular element

An angular element is a new feature of angular 6 framework angular elements translate your angular components into web component means using Angular 6 elements feature you can use your component as a Dom element. these angular elements are used to upload dynamic contents in the angular app.  angular element helps to insert dynamic HTML code after angular app compilation.  To use angular elements in angular project required rxjs and rxjs-compat for now.

@angular/elements are used to add the new custom element of web component in the angular app.  createcustomelement() is an API provided by @angular/elements which is used to convert a component into the angular element.

Add elements & polyfill

To add the angular element repository we have to write following command   in terminal

ng add @angular/elements

Above command will add new node module that is called angular element  register. That support those browsers which do not support custom html element. A new polyfill document-register-element.js will be added.

Run Following code

Ng add rxjs-compat@6

Example of angular 6 element

Now let’s begin with new component

Step1 : Ng g c temp

Add following code into temp.component.ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-temp',
  templateUrl: './temp.component.html',
  styleUrls: ['./temp.component.css']
})
export class TempComponent implements OnInit {
@Input() name: String;
  constructor() { }

  ngOnInit() {
  }

}

Step 2: Add Following code into temp.component.html

<p>
This is Our Custome Component which is now converted into Web Component
</p>
<div>hello  {{ name }}</div>

Step3: Replace the app.component.ts code with following code

import { Component, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { TempComponent } from './temp/temp.component';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  content = null;

constructor(private injector: Injector ,dom: DomSanitizer) {
  const analyticsCounter = createCustomElement(TempComponent, { injector});
  customElements.define('my-temp', analyticsCounter);
  this.content = dom.bypassSecurityTrustHtml("<my-temp name='my'></my-temp>");

}
}

Step 4: Add Following code into app.component.html

<app-header></app-header>
<app-slider></app-slider>
<div [innerHTML]="content"></div>

Step 5: Update app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { SliderComponent } from './slider/slider.component';
import { TempComponent } from './temp/temp.component';
import  { Injector} from '@angular/core';
import  { createCustomElement } from '@angular/elements';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    SliderComponent,
    TempComponent
  ],
  imports: [
    BrowserModule , NgbModule
  ],
  entryComponents :  [
    TempComponent
 ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {   
  ngDoBootstrap(){   
  }
 }

Step 6: Pass reference of following CDN into index.html for all browser compatibility

<script src="https://unpkg.com/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>

Step 7: Run Program and see output

ng serve –open

Output :