Author: saqibkhan

What is an Angular Element?

Angular elements are reusable components that have been transformed into custom elements (also called Web Components). Angular provides a simple and effective method to create Web components.

Web components are custom HTML elements available in native HTML specifications to extend the features/tags of the HTML document. It can be created through JavaScript and can be made available in the HTML document. JavaScript has special methods to create custom HTML elements.

Creating custom HTML elements using JavaScript is a lengthy process and developers need to understand the internal workings of custom HTML elements and the Shadow DOM concept. Angular simplifies the process by enabling the conversion of Angular components to web components with minimal change in the component class.

Creating Angular Elements

Creating Angular elements means transforming a component into a custom element. For this purpose, the @angular/elements package is used. This package exports a createCustomElement() function that converts a component into a class that can be registered with the browser as a custom element.

Example

Let us learn how to create a custom HTML element in Angular.

In this example, we will create a component to display employee information (say EmpCard) and convert it into custom HTML element.

Step 1: Create an angular application, emp-card-web-component using Angular CLI.

ng newemp-card-web-component

Step 2: Create the emp-card component using Angular CLI.

ng generate component emp-card
CREATE src/app/emp-card/emp-card.component.html(24 bytes)CREATE src/app/emp-card/emp-card.component.spec.ts(623 bytes)CREATE src/app/emp-card/emp-card.component.ts(253 bytes)CREATE src/app/emp-card/emp-card.component.css(0 bytes)

Step 3: Add encapsulation option in the @Component decorator with ViewEncapsulation.ShadowDom option. ShadowDom option enables the HTML native ShadowDom concept to preserve the styles of the component without leaking into the other part of the HTML document.

@Component({// ...
   encapsulation: ViewEncapsulation.ShadowDom
})exportclassEmpCardComponent{// ...}

Step 4: Next, add two input properties, name and role of the employee in the HTML element.

exportclassEmpCardComponent{
   @Input() name: string ='';
   @Input() role: string ='';}

Step 5: The complete listing of the component is as follows −

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

@Component({
   selector:'app-emp-card',
   templateUrl:'./emp-card.component.html',
   styleUrls:['./emp-card.component.css'],
   standalone:true,
   encapsulation: ViewEncapsulation.ShadowDom
})exportclassEmpCardComponent{
   @Input() name: string ='';
   @Input() role: string ='';}

Step 6: Next, open the components template and add markup to display employee name and role as shown below −

<div class="card"><div class="container"><h4><b>{{ name }}</b></h4><p>{{ role }}</p></div></div>

Step 7: Next, open the components style and add css to show shadow in the employee card.

.card{box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);}.card:hover{box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);}.container{padding: 2px 16px;max-width: 200px;}

Step 8: Next, install @angular/elements module provided by angular team. @angular/elements module has options to create custom HTML element from angular component.

ng add @angular/elements
✔ Determining Package Manager
   Using package manager: npm
✔ Searching for compatible package version
   Found compatible package version: @angular/[email protected].
✔ Loading package information from registry
✔ Confirming installation
✔ Installing package
Package "@angular/elements" was found but does not support schematics.

Step 9: Next, open the main.ts file and remove all boilerplate code.

Step 10: Next, import createApplication from @angular/platform-browser. createApplication will bootstrap the angular application.

import{ createApplication }from'@angular/platform-browser';

Step 11: Next, import createCustomElement from @angular/element module. createCustomElement will be used to create custom HTML element from the angular component.

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

Step 12: Next, import EmpCardComponnet component as shown below −

import{ EmpCardComponent }from'./app/emp-card/emp-card.component'

Step 13: Next, create application using createAppliation() method by inputting providers and a callback method. The callback method will be used to create the custom HTML element from angular component.

createApplication({ providers:[]}).then((appRef)=>{// ...});

Step 14: Implement the callback method and create custom element using createCustomElement() method. createCustomElement accepts the component to be converted and the apps injector.

We can get injector from application reference returned from createApplication() method.

createApplication({ providers:[]}).then((appRef)=>{const empCard =createCustomElement(
  EmpCardComponent,{ injector: appRef.injector });});</code></pre>


Step 15: Next, register the created custom component using JavaScript native method, customElements.define() method.



createApplication({ providers:[]}).then((appRef)=>{const empCard =createCustomElement(
  EmpCardComponent,{ injector: appRef.injector });
   
   customElements.define('emp-card', empCard);});



Step 16: The complete listing of the main file, main.ts is as follows,



import{ AppModule }from'./app/app.module';import{ createApplication }from'@angular/platform-browser';import{ createCustomElement }from'@angular/elements';import{ EmpCardComponent }from'./app/emp-card/emp-card.component'createApplication({ providers:[]}).then((appRef)=>{const empCard =createCustomElement(
  EmpCardComponent,{ injector: appRef.injector });
   
   customElements.define('emp-card', empCard);});



Step 17: Next, buid the application using angular CLIs build command



ng build --configuration=production
Initial chunk files   | Names         |  Raw size | Estimated transfer size
main-5LWF45YA.js      | main          |106.50 kB |31.17 kB
polyfills-FFHMD2TL.js | polyfills     |34.52 kB |11.28 kB
styles-5INURTSO.css   | styles        |0 bytes |0 bytes

                  | Initial total |141.02 kB |42.45 kB
Application bundle generation complete.[7.641 seconds]

Output location:D:\Angular\emp-card-web-component\dist\emp-card-web-component




Step 18: Once, the build is done, the output files are available in dist/emp-card-web-component folder. It has below files (similar files) along with a index.html file.




main-5LWF45YA.js



polyfills-FFHMD2TL.js



styles-5INURTSO.css




Step 19: Update the index.html file of the src folder with the newly created component and check the output for correctness.



<!doctype html><html lang="en"><head><meta charset="utf-8"><title>EmpCardWebComponent</title><base href="/"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="icon" type="image/x-icon" href="favicon.ico"></head><body><emp-card name="John" role="Angular developer"></emp-card><emp-card name="Maria" role="Frontend developer"></emp-card></body></html>



Here, we have added to emp-card tag with two different employee details.



Step 20: Finally, run the application and check the output in the browser.

Angular allows the component to be dynamically created and loaded at run time at a specific location in the host (another) component. Loading a component at run time opens a lot of opportunities to do advanced functionality. For example, a banner rotation component can accept heavily customized banner item instead of accepting banners confirming to a specific template, which is always pre-defined and static in nature.

Let us learn how to create an Angular component at run time and attach it to the host component in this chapter.

How to Render Angular Components Dynamically?

There are two ways to create dynamic components in Angular:

• Using NgComponentOutlet
• Using ViewContainerRef

Using NgComponentOutlet

The NgComponentOutlet is a directive that helps in dynamic component creation. It instantiates a Component and embeds its view (host view) inside the current view. Please note it only accepts Components and to use it, you need to import CommonModule.

Example

In this example, we see the practical implementation of NgComponentOutlet directive. Here, we create an Angular application that will have two main child components and they will be associated with buttons named Admin and User. On clicking the Admin button, AdminBioComponent will be displayed and when you click the User button, StandardBioComponent will be displayed.

Step 1: Create AdminBioComponent using the given command −

ng g c admin-bio

Step 2: Create a second component, StandardBioComponent using the command given below −

ng g c standard-bio

Step 3: We need another component that will contain the logic of dynamic component creation.

ng g c check-bio

Step 4: Now, open admin-bio.component.html file and copy the below code −

<h3>Admin Bio</h3><p>Content of the Admin Bio Component.</p>

Step 5: Then, open standard-bio.component.html file and copy the below code −

<h3>Standard Bio</h3><p>Content of the Standard Bio Component.</p>

Step 6: Next, open check-bio.component.html file and copy the below code −

<ng-container *ngComponentOutlet="getBioComponent()"></ng-container>

Step 7: In the check-bio.component.ts file, create a method named getBioComponent(). This method will check which button is clicked among the two and display the view accordingly. The complete code is given below −

import{ Component, Input }from'@angular/core';import{ AdminBioComponent }from'../admin-bio/admin-bio.component';import{ StandardBioComponent }from'../standard-bio/standard-bio.component';import{ NgComponentOutlet }from'@angular/common';

@Component({
  selector:'app-check-bio',
  standalone:true,
  imports:[NgComponentOutlet],
  templateUrl:'./check-bio.component.html',
  styleUrl:'./check-bio.component.css'})exportclassCheckBioComponent{
  @Input() user!:{name: string, isAdmin: boolean};getBioComponent(){ 
console.log(this.user.isAdmin)returnthis.user.isAdmin ? AdminBioComponent : StandardBioComponent;}}</code></pre>


Step 8: Next, open app.component.html file and copy the below code −



<!-- buttons to trigger admin() and userLog() methods --><button(click)="admin()">Admin</button><button(click)="userLog()">User</button><!-- conditional rendering --><div *ngIf="isValid"><!--input binding --><app-check-bio [user]="user"></app-check-bio><router-outlet /></div>



Here, the given buttons will trigger the admin() and userLog() methods. The *ngIf directive conditionally includes the <div> element in the DOM if the isValid property is true. If it is false, the <div> and its contents are not rendered.



Step 10: Finally, inside the app.component.ts file, copy the below code −



import{ Component }from'@angular/core';import{ RouterOutlet }from'@angular/router';import{ CheckBioComponent }from'./check-bio/check-bio.component';import{ CommonModule }from'@angular/common';

@Component({
  selector:'app-root',
  standalone:true,
  imports:[RouterOutlet, CheckBioComponent, CommonModule],
  templateUrl:'./app.component.html',
  styleUrls:['./app.component.css']})exportclassAppComponent{
  title ='dynamicComponent';

  user ={"name":"Admin","isAdmin":false}
  isValid =false;admin(){this.user.isAdmin =true;this.isValid =true;}userLog(){this.user.isAdmin =false;this.isValid =true;}}



Output







Using ViewContainerRef



The second way of creating and rendering components dynamically is by using ViewContainerRef. Other components or directives use it to get a reference to a view container corresponding to their location in the DOM. In this way, ViewContainerRef helps to dynamically create and insert components at that specific location.



Example



Let us create a real time application to display a collection of employees in two different formats, table and gallery. We will create two components, one to show employees in the table and another in gallery format. Then we will create a host component, which will dynamically load either table based component or gallery based component.



Step 1: Create an interface to hold common data across multiple dynamic component



$ ng generate interfaceDynDataCREATE src/app/dyn-data.ts(29 bytes)



Step 2: Create a directive, DynSample. The purpose of the directive is to target and select the view container (where dynamic component will be placed) in the host component template.



$ ng generate directive DynSample
CREATE src/app/dyn-sample.directive.spec.ts(237 bytes)CREATE src/app/dyn-sample.directive.ts(147 bytes)



Step 3: Create a dynamic component, DynList. The purpose of the component is to list the employee as gallery.



$ ng generate component DynList
CREATE src/app/dyn-list/dyn-list.component.css(0 bytes)CREATE src/app/dyn-list/dyn-list.component.html(23 bytes)CREATE src/app/dyn-list/dyn-list.component.spec.ts(567 bytes)CREATE src/app/dyn-list/dyn-list.component.ts(209 bytes)



Step 4: Create a dynamic component, DynTable. The purpose of the component is to list the employees in tabular format.



$ ng generate component DynTable
CREATE src/app/dyn-table/dyn-table.component.css(0 bytes)CREATE src/app/dyn-table/dyn-table.component.html(24 bytes)CREATE src/app/dyn-table/dyn-table.component.spec.ts(574 bytes)CREATE src/app/dyn-table/dyn-table.component.ts(213 bytes)



Step 5: Create a host component, DynHost. The purpose of the component is to host any one of the component, DynList and DynTable based on configuration.



$ ng generate component DynHost
CREATE src/app/dyn-host/dyn-host.component.css(0 bytes)CREATE src/app/dyn-host/dyn-host.component.html(23 bytes)CREATE src/app/dyn-host/dyn-host.component.spec.ts(567 bytes)CREATE src/app/dyn-host/dyn-host.component.ts(209 bytes)



Step 6: Next, open DynSampleDirective and start updating the code. The code generated by angular CLI is as follows,



import{ Directive }from'@angular/core';

@Directive({
   selector:'[appDynSample]'})exportclassDynSampleDirective{constructor(){}}



Here,




Attribute directive purpose is to target the element (ng-template) in the host components template where the dynamic component will be injected.



appDynSample is the selector to target and select the element (ng-template). The dynamic component will be created, initialized and injected into the appHello element (ng-template) later.




Step 7: Next, initialize the view component reference object (ViewComponentRef) in the directive as shown below −



import{ Directive, ViewContainerRef }from'@angular/core';

@Directive({
   selector:'[appDynSample]'})exportclassDynSampleDirective{constructor(public viewContainerRef: ViewContainerRef){}}



Here,




Imported the ViewContainerRef from @angular/core module



Initialized the viewContainerRef object through contructor dependency injection. viewContainerRef is the view container of the targeted element (ng-template) in the host components template. ViewContainerRef has method to dynamically create a component and append that component to it. We will use it later in the host component to dynamically create the DynListComponent and DynTableComponent.




Step 8: Next, open the interface, DynData and add an array property, data



exportinterfaceDynData{
   data : any[]}



Step 9: Next, open the DynListComponent component and implement DynData interface.



import{ Component }from'@angular/core';import{ DynData }from'../dyn-data'

@Component({
   selector:'app-dyn-list',
   templateUrl:'./dyn-list.component.html',
   styleUrls:['./dyn-list.component.css']})exportclassDynListComponentimplementsDynData{
   data: any[]=[]}



Here,




Imported DynData interface and implements it in class definition



Included the data property as per DynData interface specification




Step 10: Next, open the components template and render the data as list of items



<div class="gallery"><div *ngFor="let item of data" class="card"><div class="container"><h4><b>{{ item.name }}</b></h4><p>{{ item.role }}</p></div></div></div>



Here,




data hold the list of employees with two properties, name and role



Used ngFor to show the employees as list of cards




Step 11: Next, open the components styles and add necessary CSS as shown below −



.gallery{display: flex;flex-wrap: wrap;justify-content: left;gap: 10px;}.card{flex-basis: 200px;box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);}.card:hover{box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);}.container{padding: 2px 16px;max-width: 200px;}



Here, we used flex feature of CSS to show the employees in gallery format



Step 12: Next, open the DynTableComponent component and implement DynData interface.



import{ Component }from'@angular/core';import{ DynData }from'../dyn-data'

@Component({
   selector:'app-dyn-table',
   templateUrl:'./dyn-table.component.html',
   styleUrls:['./dyn-table.component.css']})exportclassDynTableComponentimplementsDynData{
   data: any[]=[]}



Here,




Imported DynData interface and implements it in class definition



Included the data property as per DynData interface specification




Step 13: Next, open the components template and render the data as list of items



<table class="employees"><thead><tr><th>Name</th><th>Role</th></tr></thead><tbody><tr *ngFor="let item of data"><td>{{ item.name }}</td><td>{{ item.role }}</td></tr></tbody></table>



Here,




data hold the list of employees with two properties, name and role



Used ngFor to render the employees as rows in the html table




Step 14: Next, open the components styles and add necessary CSS as shown below −



.employees{border-collapse: collapse;width: 400px;}.employees td, .employees th{padding: 8px;}.employees tbody tr:nth-child(even){background-color: #f2f2f2;}.employees tbody tr:hover{background-color: #ddd;}.employees thead th{padding-top: 12px;padding-bottom: 12px;text-align: left;background-color: brown;color: white;}



Step 15: Next, open DynHostComponent components template and include the DynSampleDirective as shown below −



<ng-templte appDynSample></ng-template>



Here, we have shown the ng-template using our DynSample directive.



Step 16: Next, open DynHostComponent and import necessary classes



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



Step 17: Next, import interface, list component, table component and directive



import{ DynData }from'../dyn-data'import{ DynSampleDirective }from'../dyn-sample.directive'import{ DynListComponent }from'../dyn-list/dyn-list.component'import{ DynTableComponent }from'../dyn-table/dyn-table.component'



Step 18: Implement OnInit life cycle hook in the class declaration



exportclassDynHostComponentimplementsOnInit{}



Step 19: Declare an input property to get format information (table / list) from user.



@Input() format: string ='list'



Step 20: Declare a property, data and set the sample data



private data =[{'name':'John','role':"Manager"},{'name':'Peter','role':"Marketing Intern"},{'name':'Mary','role':"Technical Intern"},{'name':'Jack','role':"Sales Manager"},{'name':'Jessica','role':"Delivery Head"},]



Step 21: Declare host property and get the ng-template view component from the template by using @ViewChild and directive type, DynSampleDirective



@ViewChild(DynSampleDirective,{static:true}) host!: DynSampleDirective;



Step 22: Do actual implementation of dynamically creating the component and loading it into the appropriate place in the ngOnInit life cycle hook



ngOnInit(){const viewContainerRef =this.host.viewContainerRef;
   viewContainerRef.clear()if(this.format =='table'){const compRef = viewContainerRef.createComponent<DynData>(DynTableComponent);
  compRef.instance.data =this.data;}else{const compRef = viewContainerRef.createComponent&lt;DynData&gt;(DynListComponent);
  compRef.instance.data =this.data;}}</code></pre>


Step 23: The complete listing of the host component is as follows,



import{ Component, ViewContainerRef, OnInit, ViewChild, Input }from'@angular/core';import{ DynData }from'../dyn-data'import{ DynSampleDirective }from'../dyn-sample.directive'import{ DynListComponent }from'../dyn-list/dyn-list.component'import{ DynTableComponent }from'../dyn-table/dyn-table.component'

@Component({
   selector:'app-dyn-host',
   templateUrl:'./dyn-host.component.html',
   styleUrls:['./dyn-host.component.css']})exportclassDynHostComponentimplementsOnInit{
   @Input() format: string ='table'private data =[{'name':'John','role':"Manager"},{'name':'Peter','role':"Marketing Intern"},{'name':'Mary','role':"Technical Intern"},{'name':'Jack','role':"Sales Manager"},{'name':'Jessica','role':"Delivery Head"},]
   
   @ViewChild(DynSampleDirective,{static:true}) host!: DynSampleDirective;ngOnInit(){const viewContainerRef =this.host.viewContainerRef;
  viewContainerRef.clear()if(this.format =='table'){const compRef = viewContainerRef.createComponent&lt;DynData&gt;(DynTableComponent);
     compRef.instance.data =this.data;}else{const compRef = viewContainerRef.createComponent&lt;DynData&gt;(DynListComponent);
     compRef.instance.data =this.data;}}}</code></pre>


Step 24: Next, open the app components template and include the host component.



<app-dyn-host format="table"/>



Here, we have directed the host component to render the employees data in the tabular format. The host component will dynamically create the DynTableComponent and inject into the host component template.



Step 25: Next, run the application and you can see that the employee data is shown in a tabular format as shown below −







Step 26: Next, open the app components template and change the format to gallery.



<app-dyn-host format="gallery"/>



Here, we have directed the host component to render the employees data in gallery format. The host component will dynamically create the DynListComponent and inject into the host component template.



Step 27: Next, run the application and you can see that the employee data is shown in gallery format as shown below −