Close the toast with click tap in Angular Toast component
4 Apr 20233 minutes to read
In default, toast gets expired based on timeOut value. You can customize toast hiding process, You can customize only hide with click/tap action by setting event args in clicked callback function with static Toast.
import { Component, ViewChild } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<div id="toast_target"></div>
<button ejs-button (click)="btnClick($event)" >Show Toast</button>
<ejs-toast #element (created)="onCreate($event)" (click)= "onClick($event)" timeOut='0' [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') element;
public position = { X: 'Left', Y: 'Bottom' };
onClick(e) {
e.clickToClose = true;
}
onCreate() {
this.element.show();
}
btnClick() {
this.element.show();
}
}
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 { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, ToastModule, ButtonModule, CheckBoxModule , RadioButtonModule, DropDownListModule, DatePickerModule
],
declarations: [AppComponent ],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);