Search results

Add dynamic template

Toast supports to change templates dynamically with displaying in multiple toasts. You can change the toast properties while calling in the Show method.

@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.Buttons
@using Syncfusion.EJ2.Blazor.Notifications

<EjsToast @ref="ToastObj">
    <ToastPosition X="Right" Y="Bottom"></ToastPosition>
</EjsToast>

<div class="col-lg-12 col-sm-12 col-md-12 center">
    <div style="margin: auto; text-align: center">
        <EjsButton @onclick="@ShowOnClick"> Show Toast </EjsButton>
    </div>
</div>

@code {
    EjsToast ToastObj;

    public int ToastFlag = 0;

    public ToastModel[] Messages = new ToastModel[] {
        new ToastModel() { Template = "2 Mail has received"},
        new ToastModel() { Template = "User Guest Logged in"},
        new ToastModel() { Template = "Logging in as Guest"},
        new ToastModel() { Template = "Ticket has reserved"}
    };

    private async void ShowOnClick()
    {
        await Task.Delay(100);
        this.ToastObj.Show(Messages[this.ToastFlag]);
        this.ToastFlag = ((this.ToastFlag == Messages.Length - 1) ? 0 : (this.ToastFlag + 1));
    }
}