We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to dynamically change the content of Blazor Toast

Platform: Blazor |
Control: Toast |
Published Date: March 23, 2020 |
Last Revised Date: April 8, 2020

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

  1. Initialize the toast component with empty content
  2. Render the button to show a toast notification
  3. Initialize the toast contents in an Array
  4. 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);
    }
}

 

ADD COMMENT
You must log in to leave a comment
Comments
Koen Janssens
Nov 29, 2020

this approach does not work for me. However, calling this.StateHasChanged() on the blazor component does work...

Reply
Indrajith Srinivasan [Syncfusion]
Nov 30, 2020

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

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile