Dynamically Loading The ng-Template From Its Name In Angular 9

Today we shall be looking at how we can dynamically load an ng-template from its name. I came accross this requriement when, in one of my projects, my task was to load an ng-template from its name. My configuration was coming from a third party service. The configuration that was returned contained the below info:

{
"field": "address", //represents the field name
"header": "Address", // represents the Header of the Field
"columnStyle": "width:27%;", // represents the style to be applied on Table Cell
"controlStyle": "width:95%;", // represents the style to be applied on Control
"order": 3, // Order of the Table cell
"isVisible": true, // whether the column is visible or not
"ngTemplate": "textBoxTemplate" // The template to be used
}

Before we dive into loading the ng-template from its name, we'll just see how we can load from its reference. For instance, if we have a sample template in our HTML like below

<ng-template #labelTemplate>
<label>Some values goes here</label>
</ng-template>

Now to reference this template in our HTML, we can simply use the below code snippet:

<div class="row>
<div class="col-12">
<ng-container [ngTemplateOutlet]="labelTemplate"></ng-container>
</div>
</div>

NOTE

You can also pass context values to the ng-template if needed by using the ngTemplateOutletContext property.

Now coming to our requirement wherein we just have the ng-template name, if we use the above approach directly to load the template it won't work in our scenario, as the values are of type string & not template reference variable name. So how can we overcome this issue? For this what I did was I created a component wherein I'll keep all of my ng-templates & I'll decorate each of the ng-templates with my custom attribute directive.

Here is the code-snippet for my custom attribute directive,

import {
Directive,
Input,
TemplateRef
} from '@angular/core';
@Directive({
selector: '[appCtrlTemplate]'
})
export class CtrlTemplateDirective {
@Input('appCtrlTemplate') name: string;
constructor(public template: TemplateRef < any > ) {}
}

Here is our sample code-snippet for my cell-template component, wherein we kept all of our ng-templates,

cell-template.component.html

<ng-template #labelTemplate [appCtrlTemplate]="'labelTemplate'" let-rowData="rowData" let-col="col" let-rowIdx="rowIdx">
<label [title]="rowData[col.field]">{{rowData[col.field]}}</label>
</ng-template>
<ng-template #textBoxTemplate [appCtrlTemplate]="'textBoxTemplate'" let-rowData="rowData" let-col="col" let-rowIdx="rowIdx">
<mat-form-field [ngStyle]="col.controlStyle">
<mat-label></mat-label>
<input type="text" #inputText="ngModel" name="txt{{col.field}}{{rowIdx}}" matInput [(ngModel)]="rowData[col.field]" />
</mat-form-field>
</ng-template>

As you can see in our custom attribute directive we've one Input property named "appCtrlTemplate" & a public property templates of type TemplateRef<any>.

When we bind this custom attribute on our ng-template we pass the name of the template as property binding to it & the template reference is bound to template property of our custom attribute.

Below is the code-snippet for our cell-template.component.ts file, where we try to resolve the template reference from its name in getTemplate method.

import {
Component,
OnInit,
ViewChildren,
QueryList,
Output,
EventEmitter,
TemplateRef
} from '@angular/core';
import {
CtrlTemplateDirective
} from '../../directives/ctrl-template.directive';
@Component({
selector: 'app-cell-templates',
templateUrl: './cell-templates.component.html'
})
export class CellTemplatesComponent implements OnInit {
@ViewChildren(CtrlTemplateDirective) templateRefs: QueryList < CtrlTemplateDirective > ;
@Output() valueChanged: EventEmitter < any > = new EventEmitter < any > ();
constructor() {}
ngOnInit(): void {}
getTemplate(templateName: string): TemplateRef < any > {
return this.templateRefs.toArray().find(x => x.name.toLowerCase() == templateName.toLowerCase()).template;
}
}

So far we saw how we can resolve the template reference by its name. Let's practically try to see whether it works or not. For this I created a home.component.html page, where we've one mat-table in which we show some dummy employee data. This data is loaded from an employee-data-store.service which has some dummy records. Below is the code snippet for the same.

EmployeeDataStoreService.ts

import {
Employee
} from '../models/employee.model';
import {
Injectable
} from '@angular/core';
@Injectable()
export class EmployeeDataStoreService {
private eData: Employee[] = [];
public getEmployees() {
const json = `[
{
"photo": "/assets/img/user-icon.jpg",
"age": 25,
"name": "Aimee Weeks",
"gender": "female",
"email": "[email protected]",
"dob": "11/08/1988",
"address": "842 Java Street, Kapowsin, Mississippi, 8052"
},
{
"photo": "/assets/img/user-icon.jpg",
"age": 22,
"name": "Vicky Avery",
"gender": "female",
"email": "[email protected]",
"dob": "08/11/1988",
"address": "803 Vanderveer Street, Remington, South Carolina, 1829"
},
{
"photo": "/assets/img/user-icon.jpg",
"age": 30,
"name": "Cleveland Vance",
"gender": "male",
"email": "[email protected]",
"dob": "12/21/1986",
"address": "397 Hamilton Walk, Loretto, Massachusetts, 1096"
},
{
"photo": "/assets/img/user-icon.jpg",
"age": 40,
"name": "Craft Frost",
"gender": "male",
"email": "[email protected]",
"dob": "02/02/1970",
"address": "519 Arlington Place, Waukeenah, Delaware, 4549"
},
{
"photo": "/assets/img/user-icon.jpg",
"age": 23,
"name": "Debbie Blevins",
"gender": "female",
"email": "[email protected]",
"dob": "02/05/1980",
"address": "855 Hinckley Place, Edmund, Virginia, 6139"
},
{
"photo": "/assets/img/user-icon.jpg",
"age": 27,
"name": "Woodard Lott",
"gender": "male",
"email": "[email protected]",
"dob": "01/30/1982",
"address": "865 Karweg Place, Johnsonburg, Utah, 4270"
}
]`;
this.eData = JSON.parse(json);
return this.eData;
}
}

And as I mentioned during the start of this article, my configuration is coming from some third party service, so in order to mimic this, I've created one configuration file which I'm loading info APP-INITIALIZER of our app.module.ts file.

Here is the code snippet for our configuraton file,

table-config.json

{
"columns": [{
"field": "photo",
"header": "Photo",
"columnStyle": "width:10%;",
"controlStyle": "width:50px;height:50px;",
"order": 0,
"isVisible": true,
"ngTemplate": "imgTemplate"
}, {
"field": "name",
"header": "Name",
"columnStyle": "width:15%;",
"order": 1,
"isVisible": true,
"ngTemplate": "labelTemplate"
}, {
"field": "dob",
"header": "DOB",
"columnStyle": "width:18%;",
"order": 2,
"isVisible": true,
"ngTemplate": "datePickerTemplate"
}, {
"field": "address",
"header": "Address",
"columnStyle": "width:27%;",
"controlStyle": "width:95%;",
"order": 3,
"isVisible": true,
"ngTemplate": "textBoxTemplate"
}, {
"field": "gender",
"header": "Gender",
"columnStyle": "width:18%;",
"order": 4,
"isVisible": true,
"ngTemplate": "radioTemplate"
}, {
"field": "email",
"header": "Email",
"columnStyle": "width:12%;",
"order": 5,
"isVisible": true,
"ngTemplate": "textBoxTemplate"
}]
}

And now in our app.module.ts file,

import {
BrowserModule
} from '@angular/platform-browser';
import {
NgModule,
APP_INITIALIZER
} from '@angular/core';
import {
HttpClientModule
} from '@angular/common/http';
import {
BrowserAnimationsModule
} from '@angular/platform-browser/animations';
import {
AppComponent
} from './app.component';
import {
PagesModule
} from './pages/pages.module';
import {
AppConfigService
} from './shared/services/app-config.service';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule,
BrowserAnimationsModule,
PagesModule
],
providers: [{
provide: APP_INITIALIZER,
useFactory: (appConfigSvc: AppConfigService) => {
return async () => {
return appConfigSvc.getAppConfig().subscribe((response) => {
console.log('Response', response);
});
}
},
deps: [AppConfigService],
multi: true
}],
bootstrap: [AppComponent]
})
export class AppModule {}

Finally our home.component.html file,

<div class="row">
<div class="col-12">
<form #testForm="ngForm">
<mat-card>
<mat-card-header>
<mat-card-title>NgTemplates</mat-card-title>
<mat-card-subtitle>Dynamically loading Templates from Template Name</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<table mat-table [dataSource]="dataSource" class="w-100">
<ng-container *ngFor="let col of columns" [matColumnDef]="col.field">
<th mat-header-cell *matHeaderCellDef>
{{col.header}}
</th>
<td mat-cell *matCellDef="let row; let idx=index" [ngStyle]="col.columnStyle">
<ng-cotainer [ngTemplateOutlet]="getTemplate(col.ngTemplate)"
[ngTemplateOutletContext]="{rowData:row,col:col,rowIdx:idx}"></ng-cotainer>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns;"></tr>
<tr mat-row *matRowDef="let row; columns:displayedColumns; let idx = index"></tr>
</table>
</mat-card-content>
</mat-card>
<app-cell-templates #cellTemplates id="cellTemplates"></app-cell-templates>
</form>
</div>
</div>

code-snippet for Home.component.ts file

import {
Component,
OnInit,
ViewChild,
TemplateRef,
OnDestroy
} from '@angular/core';
import {
MatTableDataSource
} from '@angular/material/table';
import {
takeUntil
} from 'rxjs/operators';
import {
CellTemplatesComponent
} from '../../shared/component/cell-templates/cell-templates.component';
import {
Employee
} from '../../shared/models/employee.model';
import {
TableConfig,
IColumn
} from '../../shared/models/table-config.model';
import {
AppConfigService
} from '../../shared/services/app-config.service';
import {
Subject
} from 'rxjs';
import {
EmployeeDataStoreService
} from 'src/app/shared/services/employee-data-store.service';
import {
AppUtility
} from 'src/app/app-utility';
@Component({
selector: 'app-home',
templateUrl: './home.component.html'
})
export class HomeComponent implements OnInit, OnDestroy {
@ViewChild('cellTemplates') cellTemplates: CellTemplatesComponent;
columns: IColumn[];
displayedColumns: string[];
tableConfig: TableConfig;
dataSource: MatTableDataSource < Employee > ;
private componentDestroyed$: Subject < boolean > ;
constructor(private appConfigService: AppConfigService, private eStoreDataService: EmployeeDataStoreService) {
this.displayedColumns = [];
this.columns = [];
this.dataSource = new MatTableDataSource([]);
this.componentDestroyed$ = new Subject < false > ();
}
ngOnInit(): void {
this.appConfigService.appConfiguration$.pipe(takeUntil(this.componentDestroyed$)).subscribe((response) => {
if (response.columns && response.columns.length > 0) {
this.tableConfig = response;
this.initializeTable();
}
});
}
private initializeTable() {
this.tableConfig.columns.map(x => {
let obj: IColumn = {}
as IColumn;
Object.keys(x).forEach(prop => {
if (prop == "columnStyle" || prop == "controlStyle") {
obj[prop] = AppUtility.convertNgStyleStringToObject(x[prop].toString());
} else {
obj[prop] = x[prop];
}
});
this.columns.push(obj);
});
this.displayedColumns = this.columns.filter(x => x.isVisible).sort(x => x.order).map(x => x.field);
this.dataSource.data = this.eStoreDataService.getEmployees();
}
getTemplate(ngTemplateName: string): TemplateRef < any > {
return this.cellTemplates.getTemplate(ngTemplateName);
}
ngOnDestroy() {
this.componentDestroyed$.next(true);
this.componentDestroyed$.complete();
}
}

Finally here is our working demo, as we can see, each of our template is rendered dynamically from its name.