Angular Elements

This is very important step to transform an ordinary component to custom element.

To use Angular Component as Custom Element we will step by step configure it on app.module.ts.

• Import Injector from @angular/core package and createCustomElement from @angular/elements package.
  

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

• FrameworkVoteComponent is not a part of any other component and is also not a root of an Angular application, so we need to specifically tell Angular to compile it: for this, we put it on the entryComponents list of @NgModule.
  

  entryComponents : [
      FrameworkVoteComponent
  ]

• Transform FrameworkVoteComponent to the custom element
  

  export class AppModule { 
    constructor(private injector : Injector){
    }
  
    ngDoBootstrap(){
      const el = createCustomElement(FrameworkVoteComponent, {injector : this.injector});
      customElements.define('framework-vote',el);
    }
  }

  as you can see in the above snippet we will bootstrap Angular Component as custom element in ngDoBootstrap() method.

• In ngDoBootstrap() method call createCustomElement() function to transform FrameworkVoteComponent as Custom Element.
  This function required two parameters
  • First, The Angular component which should be used to create the element.
  • Second, A configuration object. This object needs to include the injector property which is set to the current Injector instance.
• The next step is to register the newly created custom element in the browser. This is done by calling customElements.define(). Please note that this is not Angular.
  The customElements read-only property belongs to the Window interface and returns a reference to the CustomElementRegistry object, which can be used to register new custom elements and get information about previously registered custom elements in the browser.
  The customElements.define() method requires two parameter.
  • The first parameter is of type string and contains the name of the element. Passing the string framework-vote means that the  custom element <framework-vote> will be registered and can be used in the HTML code.
  • The second parameter is the custom element which has been created before.