ToastModel

23 Sep 20256 minutes to read

Interface for a class Toast

Properties

beforeClose EmitType<ToastBeforeCloseArgs>

Triggers the event before the toast close.

beforeOpen EmitType<ToastBeforeOpenArgs>

Triggers the event before the toast shown.

beforeSanitizeHtml EmitType<BeforeSanitizeHtmlArgs>

Event triggers before sanitize the value.

click EmitType<ToastClickEventArgs>

The event will be fired while clicking on the Toast.

close EmitType<ToastCloseArgs>

Trigger the event after the Toast hides.

created EmitType<Event>

Triggers the event after the Toast gets created.

destroyed EmitType<Event>

Triggers the event after the Toast gets destroyed.

open EmitType<ToastOpenArgs>

Triggers the event after the Toast shown on the target container.

animation ToastAnimationSettingsModel

Specifies the animation configuration settings for showing and hiding the Toast.

import { Component, ViewChild } from "@angular/core";
import { ToastComponent , ToastAnimationSettingsModel} from "@syncfusion/ej2-angular-notifications";
import { ButtonComponent } from "@syncfusion/ej2-angular-buttons";

@Component({
  selector: "app-root",
  template:
    ' <ejs-toast #defaulttoast (created)="onCreate()" [animation]="showAnimation"><ng-template #content> <div>Toast content</div>  </ng-template> <ng-template #title> <div>Toast</div></ng-template></ejs-toast>'
})
export class AppComponent {
  @ViewChild("defaulttoast")
  public toastObj: ToastComponent;

  public onCreate = (): void => {
    this.toastObj.show();
  };

   public showAnimation: ToastAnimationSettingsModel  ={ show: { effect: 'FadeIn', duration: 600, easing: 'linear'},hide: { effect: 'FadeOut', duration: 600, easing: 'linear' }}
}

buttons ButtonModelPropsModel[]

Specifies the collection of Toast action buttons to be rendered with the given
Button model properties and its click action handler.

import { Component, ViewChild } from "@angular/core";
import { ToastComponent } from "@syncfusion/ej2-angular-notifications";
import { ButtonComponent,  ButtonModelPropsModel } from "@syncfusion/ej2-angular-buttons";

@Component({
  selector: "app-root",
  template: ' <ejs-toast #defaulttoast (created)="onCreate()" [buttons]="buttons"></ejs-toast>'
})
export class AppComponent {
  @ViewChild("defaulttoast")
  public toastObj: ToastComponent;

  public onCreate = (): void => {
    this.toastObj.show();
  };

  public buttons: ButtonModelPropsModel[] = [
    {
      model: { content: `CLICK`}
    }
  ];
}

content string|HTMLElement|Function

Specifies the content to be displayed on the Toast.
Accepts selectors, string values and HTML elements.

cssClass string

Defines single/multiple classes (separated by space) to be used for customization of Toast.

enableHtmlSanitizer boolean

Defines whether to allow the cross-scripting site or not.

enablePersistence boolean

Enable or disable persisting component’s state between page reloads.

enableRtl boolean

Enable or disable rendering component in right to left direction.

extendedTimeout number

Specifies the Toast display time duration after interacting with the Toast.

height string|number

Specifies the height of the Toast in pixels/number/percentage. Number value is considered as pixels.

icon string

Defines CSS classes to specify an icon for the Toast which is to be displayed at top left corner of the Toast.

locale string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

newestOnTop boolean

Specifies the newly created Toast message display order while multiple toast’s are added to page one after another.
By default, newly added Toast will be added after old Toast’s.

Specifies the position of the Toast message to be displayed within target container.
In the case of multiple Toast display, new Toast position will not update on dynamic change of property values
until the old Toast messages removed.
X values are: Left , Right ,Center
Y values are: Top , Bottom

  import { Component, ViewChild } from "@angular/core";
  import { ToastComponent ,ToastPositionModel } from "@syncfusion/ej2-angular-notifications";
  import { ButtonComponent } from "@syncfusion/ej2-angular-buttons";

  @Component({
    selector: "app-root",
    template: ' <ejs-toast #defaulttoast (created)="onCreate()" [position]="position"></ejs-toast>'
  })
  export class AppComponent {
    @ViewChild("defaulttoast")
    public toastObj: ToastComponent;

    public onCreate = (): void => {
      this.toastObj.show();
    };

    public position: ToastPositionModel =  { X: 'Right', Y: 'Top' }
  }

progressDirection ProgressDirectionType

Specifies whether to show the progress bar with left to right direction to denote the Toast message display timeout.

showCloseButton boolean

Specifies whether to show the close button in Toast message to close the Toast.

showProgressBar boolean

Specifies whether to show the progress bar to denote the Toast message display timeout.

target HTMLElement|Element|string

Specifies the target container where the Toast to be displayed.
Based on the target, the positions such as Left, Top will be applied to the Toast.
The default value is null, which refers the document.body element.

template string|Function

Specifies the HTML element/element ID as a string that can be displayed as a Toast.
The given template is taken as preference to render the Toast, even if the built-in properties such as title and content are defined.

  import { Component, ViewChild } from "@angular/core";
  import { ToastComponent ,ToastPositionModel } from "@syncfusion/ej2-angular-notifications";
  import { ButtonComponent } from "@syncfusion/ej2-angular-buttons";

  @Component({
    selector: "app-root",
    template: ' <ejs-toast #defaulttoast (created)="onCreate()" > <ng-template #template><div>Toast</div> </ng-template> </ejs-toast>'
  })
  export class AppComponent {
    @ViewChild("defaulttoast")
    public toastObj: ToastComponent;

    public onCreate = (): void => {
      this.toastObj.show();
    };

   }

timeOut number

Specifies the Toast display time duration on the page in milliseconds.

Once the time expires, Toast message will be removed.
Setting 0 as a time out value displays the Toast on the page until the user closes it manually.

title string|Function

Specifies the title to be displayed on the Toast.
Accepts selectors, string values and HTML elements.

width string|number

Specifies the width of the Toast in pixels/numbers/percentage. Number value is considered as pixels.
In mobile devices, default width is considered as 100%.

Search docs

Ask HelpBot