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));

See Also