Angular Custom Element Tutorial | Create Dynamic Elements From Service Class

Angular Custom Element Tutorial | Create Dynamic Elements from Service Class

In this video, I discuss about angular custom element tutorial, and creating dynamic elements from angular. This video is for intermediate angular developers. In this video, I discussed the Angular Custom Element creation process. This element is created from the angular application as native dom elements with angular features. these elements are created by the angular service class dynamically. when you need to put some views as components into other components’ text. that time it is very helpful for the text injector. If you wanted to embed WordPress shortcode into the angular page components but that time. you wanted to inject some design integrated by the shortcode at that time this Angular Custom Element Creation process is required. But here explains how can be created and injected custom elements using the service class. What this video 2 or 3 times to understand the whole concept of this video.

Here I explain the steps of the video topics:

Create Blank App By Command ng new AngularElement
First Web need to be setup browser supports package npm install @angular/elements --save
Create new Popup Component by command ng g c popup
Then Implemented Component HTML Part like Video

popup.component.html codes

<h1>Message: {{message}}</h1>
<button (click)="closed.next()">Close</button>

Then Implementd Component TypeScript File

popup.component.ts codes

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

@Component({
  selector: 'app-popup',
  templateUrl: './popup.component.html',
  styleUrls: ['./popup.component.css']
})
export class PopupComponent {
  private _message: string = '';
  @Input()
  get message() {
    return this._message;
  }
  set message(value: string) {
    this._message = value;
  }

  @Output() closed = new EventEmitter<void>();
}

Then Implemented Service Class

popup.service.ts codes

import { ApplicationRef, EnvironmentInjector, Injectable, createComponent } from '@angular/core';
import { PopupComponent } from './popup.component';
import { NgElement, WithProperties } from '@angular/elements';

@Injectable({
  providedIn: 'root'
})
export class PopupService {

  constructor(
    private injector: EnvironmentInjector,
    private applicationRef: ApplicationRef,
  ) { }

  openAsComponent(message: string) {
    const popup = document.createElement('popup-component');

    const popupRef = createComponent(PopupComponent, {
      environmentInjector: this.injector,
      hostElement: popup
    });
    this.applicationRef.attachView(popupRef.hostView);

    popupRef.instance.closed.subscribe(() => {
      document.querySelector('app-root')!.removeChild(popup);
      this.applicationRef.detachView(popupRef.hostView);
    });
    popupRef.instance.message = message;
    console.log(popup);
    
    document.querySelector('app-root')!.appendChild(popup);
  }

  openAsElement(message: string) {
    const popupEl: NgElement & WithProperties<PopupComponent> = document.createElement('popup-element') as any;
    popupEl.message = message;
    popupEl.addEventListener("closed", () => document.body.removeChild(popupEl));
    console.log(popupEl);
    
    document.body.appendChild(popupEl);
  }
}

The App Component HTML file needs to be updated

app.component.html codes

<h1>Welcome {{title}}</h1>
<input type="text" #input placeholder="Enter a Message">
<button (click)="popup.openAsComponent(input.value)">Open As Component</button>
<button (click)="popup.openAsElement(input.value)">Open As Element</button>

The App Component TypeScript File needs to be updated

app.component.ts codes

import { Component, Injector } from '@angular/core';
import { PopupService } from './popup/popup.service';
import { createCustomElement } from '@angular/elements';
import { PopupComponent } from './popup/popup.component';

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

  constructor(inject: Injector, public popup: PopupService){
    const popupElement = createCustomElement(PopupComponent, {injector: inject});
    customElements.define('popup-element', popupElement);
  }
}

This is the Step-by-step code snippets for this sample code. I hope you can implement this code easily after learning from this video article. If you want to learn more about software development training, follow and subscribe to Shibaji Debnath. If you want to join the live training class, checkout the course syllabus for Angular Training.

Shibaji Debnath

Angular Custom Element Tutorial | Create Dynamic Elements from Service Class