Template in Angular Toast component
27 Apr 202418 minutes to read
Template property can be given as the HTML element that is either a string or a query selector.
The HTML element tag can be given as a string for the template property.
template: "<div>Toast Content</div>"The template property also allows getting template content through query selector. Here, element ‘ID’ attribute is specified in the template.
template: "#Template"import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ToastModule } from '@syncfusion/ej2-angular-notifications'
import { ButtonModule, CheckBoxModule , RadioButtonModule } from '@syncfusion/ej2-angular-buttons'
import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns'
import { DatePickerModule } from '@syncfusion/ej2-angular-calendars'
import { Component, ViewChild } from '@angular/core';
import { ChangeArgs } from '@syncfusion/ej2-angular-buttons';
import { DropDownListComponent } from '@syncfusion/ej2-angular-dropdowns';
import { ToastComponent } from '@syncfusion/ej2-angular-notifications';
@Component({
imports: [
ToastModule, ButtonModule, CheckBoxModule , RadioButtonModule, DropDownListModule, DatePickerModule
],
standalone: true,
selector: 'app-root',
template: `
<div id="toast_target"></div>
<div id='sample_container'>
<div id='container'>
<div class='row' style="padding-top: 20px" id= "toast_pos_target">
<div id="toast_pos"> </div>
<div id="toast_pos_property">
<table style="width: 100%">
<tr>
<td>
<div style='padding:25px 0 0 0;'>
<ejs-radiobutton (change)="positionChange($event)" label="Position" name="position" value="position" checked="true"></ejs-radiobutton>
</div>
</td>
<td>
<div style='padding:25px 0 0 0;'>
<ejs-radiobutton (change)="customePosition($event)" label="Custom" name="position" value="position"></ejs-radiobutton>
</div>
</td>
</tr>
<tr>
<td id="dropdownChoose" colspan="2">
<div id="dropdown" style='padding-top:25px;'>
<ejs-dropdownlist #dropDown (change)="dropDownChange($event)" [dataSource]='dropdownDB' index='4'>
</ejs-dropdownlist>
</div>
</td>
</tr>
<tr>
<td colspan="2" id="customChoose" style="display: none">
<form id="formId" class="form-horizontal">
<div class='e-row'>
<div class="e-float-input">
<input class="e-input" id="xPos" name="Digits" value=50 digits="true" data-digits-message="Please enter digits only." required="">
<span class="e-float-line"></span>
<label class="e-float-text" for="Digits">X Position</label>
</div>
</div>
<div class='e-row'>
<div class="e-float-input">
<input class="e-input" id="yPos" name="Digits" value=50 digits="true" data-digits-message="Please enter digits only." required="">
<span class="e-float-line"></span>
<label class="e-float-text" for="Digits">Y Position</label>
</div>
</div>
</form>
</td>
</tr>
<tr>
<td>
<div style='padding:25px 0 0 0;'>
<ejs-radiobutton (change)="targetChange($event)" label="Target" name="target" value="Bottom"></ejs-radiobutton>
</div>
</td>
<td>
<div style='padding:25px 0 0 0;'>
<ejs-radiobutton (change)="globalTargetChange($event)" label="Global" name="target" value="Bottom" checked="true"></ejs-radiobutton>
</div>
</td>
</tr>
</table>
<div id="toast_btn" style="padding-top: 25px">
<button ejs-button [isPrimary]="true" (click)="btnClick()">Show Toast</button>
</div>
</div>
</div>
</div></div>
<ejs-toast #element (created)="onCreate()" [position] = 'position' >
<ng-template #title>
<div>Matt sent you a friend request</div>
</ng-template>
<ng-template #content>
<div>Hey, wanna dress up as wizards and ride our hoverboards?</div>
</ng-template>
</ejs-toast>
`
})
export class AppComponent {
@ViewChild('element') toastObj: any;
@ViewChild('dropDown') dropDownList : any;
public position = { X: 'Right', Y: 'Bottom' };
public dropdownDB = ['Top Left', 'Top Right', 'Top Center', 'Bottom Left', 'Bottom Right', 'Bottom Center' ];
public customFlag = false;
onCreate() {
this.toastShow();
}
btnClick() {
if (this.customFlag) {
this.setcustomPosValue();
}
this.toastObj.hide('All');
this.toastShow();
}
positionChange(e: any) {
if (e.event.target.checked) {
this.toastObj.hide('All');
(document.getElementById('dropdownChoose') as any).style.display = 'table-cell';
(document.getElementById('customChoose') as any).style.display = 'none';
this.setToastPosValue(this.dropDownList.value.toString());
this.customFlag = false;
this.toastShow();
}
}
customePosition(e: ChangeArgs) {
debugger;
if (e.event && (e.event.target as any).checked) {
this.toastObj.hide('All');
(document.getElementById('dropdownChoose') as any).style.display = 'none';
(document.getElementById('customChoose')as any).style.display = 'table-cell';
this.setcustomPosValue();
this.customFlag = true;
this.toastShow();
}
}
dropDownChange(e: ChangeArgs) {
this.toastObj.hide('All');
this.setToastPosValue(e.value as any);
this.toastShow();
}
globalTargetChange(e: ChangeArgs) {
if (e.event && (e.event.target as any).checked) {
this.toastObj.hide('All');
this.toastObj.target = document.body;
this.toastShow();
}
}
targetChange(e: ChangeArgs) {
if (e.event && (e.event.target as any).checked) {
this.toastObj.hide('All');
this.toastObj.target = '#toast_pos_target';
this.toastShow();
}
}
setcustomPosValue(): void {
this.toastObj.position.X = parseInt((<any>document.getElementById('xPos')).value, 10);
this.toastObj.position.Y = parseInt((<any>document.getElementById('yPos')).value, 10);
}
setToastPosValue(value: string): void {
value = value.toLowerCase().replace(' ', '');
let toastObj = this.toastObj;
switch (value) {
case 'topleft':
toastObj.position.X = 'Left'; toastObj.position.Y = 'Top'; break;
case 'topright':
toastObj.position.X = 'Right'; toastObj.position.Y = 'Top'; break;
case 'topcenter':
toastObj.position.X = 'Center'; toastObj.position.Y = 'Top'; break;
case 'topfullwidth':
toastObj.width = '100%'; toastObj.position.X = 'Center'; toastObj.position.Y = 'Top'; break;
case 'bottomleft':
toastObj.position.X = 'Left'; toastObj.position.Y = 'Bottom'; break;
case 'bottomright':
toastObj.position.X = 'Right'; toastObj.position.Y = 'Bottom'; break;
case 'bottomcenter':
toastObj.position.X = 'Center'; toastObj.position.Y = 'Bottom'; break;
case 'bottomfullwidth':
toastObj.width = '100%'; toastObj.position.X = 'Center'; toastObj.position.Y = 'Bottom'; break;
}
}
toastShow() {
setTimeout(
() => {
this.toastObj.show();
}, 700);
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));