Category / Section
How to dynamically change the content of Blazor Toast
1 min read
The Syncfusion Blazor Toast component allows to change its content dynamically instead of showing it as static content. You can use minimum delay to reflect the new content in toast.
Steps to dynamically change toast content
- Initialize the toast component with empty content
- Render the button to show a toast notification
- Initialize the toast contents in an Array
- On button click, get the content randomly and show a toast using ‘Show’ method with minimum delay.
Run the following code and click ‘Show Toast’ button to create toast with dynamic content.
@using Syncfusion.Blazor
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Notifications
<SfToast @ref="ToastObj" Title="Alert" Content="@ToastContent">
<ToastPosition X="Right" Y="Bottom"></ToastPosition>
</SfToast>
<div class="col-lg-12 col-sm-12 col-md-12 center">
<div style="margin: auto; text-align: center">
<SfButton @onclick="@ShowOnClick"> Show Toast </SfButton>
</div>
</div>
@code {
SfToast ToastObj;
private int ToastFlag = 0;
private string ToastContent = "";
private string[] Contents = new string[] {
"Welcome User",
"Upload in progress",
"Upload success",
"Profile updated",
"Profile picture changed",
"Password changed"
};
private async void ShowOnClick()
{
this.ToastContent = this.Contents[this.ToastFlag];
await Task.Delay(100);
await this.ToastObj.Show();
this.ToastFlag = ((this.ToastFlag != 5) ? (this.ToastFlag + 1) : 0);
}
}
