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.
