New to Telerik UI for Blazor? Download free 30-day trial

Open, Close and Hide Notifications

This article explains how to open, close and hide the Notification component. For brevity, it will be divided in the following sections:

Open

You can open (show) the Notification component by using the Show method of its reference.

You can use it in two ways:

You can also show all notifications for your app from a single instance so they all stack together and also stay between page navigations.

Use Only the Text and ThemeColor Properties

If you do not need to customize the closing or the icon of the component you can quickly create them by passing only what text and theme color should the Notification have.

@* At minimum, you can pass a text message and a color to the Show() method *@

<TelerikButton OnClick="@OpenNotification">Open a notification</TelerikButton>

<TelerikNotification @ref="@NotificationReference" />

@code {
    public TelerikNotification NotificationReference { get; set; }

    public void OpenNotification()
    {
        NotificationReference.Show("My notification", "success");
    }
}

Pass a NotificationModel to the Method

You can pass the entire NotificationModel to provide detailed information for the component - whether it should be closable or specify the icon.

@* You can pass the entire NotificationModel with all its features for complete control over the message settings *@

<TelerikButton OnClick="@OpenNotification">Open a notification</TelerikButton>

<TelerikNotification @ref="@NotificationReference" />

@code {
    public TelerikNotification NotificationReference { get; set; }

    public void OpenNotification()
    {
        NotificationReference.Show(new NotificationModel()
        {
            Text = "My Notification",
            ThemeColor = "success",
            ShowIcon = true,
            Icon = "star",
            Closable = false
        });
    }
}

Show From Anywhere

You can declare a single notification instance in the main layout of your app and pass it down to all components in the app so they can all show notifications if they need to. You can find an example implementation in the One Notification Instance for All Components sample project.

Close and Hide

There are two separate ways to close a notification:

Automatically Closing Notification

By default each notification is an automatically closing one. You can define the time it stays visible by adjusting the CloseAfter parameter of the NotificationModel. It defaults to 5000ms.

You can also let the user dismiss a notification message before that timer elapses through a closing button by setting the Closable parameter of the NotificationModel to true (its default value).

Automatically Closing Notification

@* By default, notification messages close on their own after 5 seconds *@

<TelerikButton OnClick="@AddAutoClosingNotification">Add Auto closing notification</TelerikButton>

<TelerikNotification @ref="@NotificationReference" />

@code {
    public TelerikNotification NotificationReference { get; set; }

    public void AddAutoClosingNotification()
    {
        NotificationReference.Show(new NotificationModel()
        {
            Text = "My Notification",
            ThemeColor = "success",
            Closable = false,
            CloseAfter = 2000,
            Icon = "star"
        });
    }
}

Manually Closing a Notification

You can prevent the notification from closing automatically and let the user close it with the close button only. To do so, in the NotificationModel instance, set the Closable parameter to true and the CloseAfter parameter to 0.

Manually Closing Notification

@* This notification will not disappear automatically, the user must close it on their own *@

<TelerikButton OnClick="@AddManuallyClosingNotification">Add manually closing notification</TelerikButton>

<TelerikNotification @ref="@NotificationReference" />

@code {
    public TelerikNotification NotificationReference { get; set; }

    public void AddManuallyClosingNotification()
    {
        NotificationReference.Show(new NotificationModel()
        {
            Text = "My Notification",
            ThemeColor = "success",
            Closable = true,
            CloseAfter = 0,
            Icon = "star"
        });
    }
}

See Also

In this article
Not finding the help you need? Improve this article