How to dynamically change the content of Blazor Toast
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);
}
}
Hi Koean,
Greetings from Syncfusion support,
We have checked the reported query from our end and the above code blocks of changing the toast content works fine, without calling the StateHasChanged(). We have also shared the ensured sample from our end.
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfToast_content-1940486302
Can you please check the above shared sample and let us know if you are still facing the reported issue ?
Regards, Indrajith
I also needed to call StateHasChanged() to get the new content to display. Adding the delay did not seem to make a difference.
Hi Rob,
We have validated your reported query. We have tried to reproduce the reported issue, but unfortunately we couldn’t find any issues with the SfToast. The ToastObj content is updated after the Content property is changed dynamically using a time delay without calling the StateHasChanged() method. We have also prepared the sample using 20.1.0.51 Syncfusion.Blazor.Notifications nuget version and find the video below for reference.
Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/V_542022_143445-1955563569
If you still have a problem, can you please share the below details?
- Have you referred to an individual (Syncfusion.Blazor.Notifications) or common (Syncfusion.Blazor) nuget package?
- Share the runnable sample or code to replicate your issue at our end.
Regards, Buvana S
Same here. Even with the latest versions of the NuGet packages your suggested approach using the delay does not work - the Toast doesn't show the content from the bound property. But when I call StateHasChanged() it is working.
this approach does not work for me. However, calling this.StateHasChanged() on the blazor component does work...