Reuse One Notification Instance in the App
Environment
Product | Notification for Blazor |
Description
This KB article answers the following questions:
- How to use a single Telerik Notification component for Blazor in multiple other Razor files?
- How to reuse one Notification instance in the whole Blazor application?
Solution
There are two possible ways to implement a reusable Notification component instance:
The Notification component in both scenarios must be defined:
- As a descendant (or child) of the
<TelerikRootComponent>
. - In a
.razor
file with enabled interactive render mode. TheMainLayout
is interactive only if the Blazor app has Global interactivity location.
Pass the Notification in a Cascading Value
-
Define a Telerik Notification component in
MainLayout.razor
. -
Set the Notification
@ref
attribute. Use aninternal
orpublic
accessor. - Wrap the
@Body
inMainLayout
in a<CascadingValue>
that passes theMainLayout
instance itself. This avoids potential issues with missing Notification instance in child components on initial app load. SetIsFixed="true"
to theCascadingValue
to avoid unnecessary renders. - Consume the
MainLayout
instance in child Razor components as a[CascadingParameter]
and access the Notification instance methods through theMainLayout
instance.
@inherits LayoutComponentBase
<TelerikRootComponent>
<TelerikNotification @ref="@NotificationRef" />
<CascadingValue Value="@this" Name="MainLayoutRef" IsFixed="true">
@Body
</CascadingValue>
</TelerikRootComponent>
@code {
internal TelerikNotification? NotificationRef { get; set; }
}
@using YourAppName.Components.Layout
@page "/"
<PageTitle>Home</PageTitle>
<TelerikButton OnClick="@ShowNotification">Show Notification</TelerikButton>
<TelerikButton OnClick="@HideNotifications">Hide All Notifications</TelerikButton>
@code {
[CascadingParameter(Name = "MainLayoutRef")]
public MainLayout? MainLayoutRef { get; set; }
private void ShowNotification()
{
MainLayoutRef?.NotificationRef?.Show(new NotificationModel()
{
Text = $"Notification at {DateTime.Now.ToString("HH:mm:ss.fff")}"
});
}
private void HideNotifications()
{
MainLayoutRef?.NotificationRef?.HideAll();
}
}
Use the Notification as a Service
- Implement a service that holds a Notification component instance as a property and executes component methods.
- Register the service in
Program.cs
. -
Define a Telerik Notification component in
MainLayout.razor
. - Inject the service in
MainLayout.razor
and set the Notification@ref
attribute to a property of the service. - Inject and use the service in other Razor components.
using Telerik.Blazor.Components;
namespace YourAppName.Services
{
public class NotificationService
{
public TelerikNotification? NotificationRef { get; set; }
public void Show(string text, string? themeColor = null)
{
NotificationRef?.Show(new NotificationModel()
{
Text = text,
ThemeColor = themeColor
});
}
public void Show(NotificationModel notificationModel)
{
NotificationRef?.Show(notificationModel);
}
public void HideAll()
{
NotificationRef?.HideAll();
}
}
}
builder.Services.AddSingleton<NotificationService>();
@using YourAppName.Services
@inherits LayoutComponentBase
@inject NotificationService NotificationService
<TelerikRootComponent>
<TelerikNotification @ref="@NotificationService.NotificationRef" />
<CascadingValue Value="@this" Name="MainLayoutRef" IsFixed="true">
@Body
</CascadingValue>
</TelerikRootComponent>
@page "/"
@inject NotificationService NotificationService
<PageTitle>Home</PageTitle>
<TelerikButton OnClick="@ShowTextNotification">Show Simple Notification</TelerikButton>
<TelerikButton OnClick="@ShowIconNotification">Show Rich Notification</TelerikButton>
<TelerikButton OnClick="@HideNotifications">Hide All Notifications</TelerikButton>
@code {
private void ShowTextNotification()
{
NotificationService.Show($"Notification at {DateTime.Now.ToString("HH:mm:ss.fff")}");
}
private void ShowIconNotification()
{
NotificationService.Show(new NotificationModel()
{
Icon = SvgIcon.Check,
Text = $"Notification at {DateTime.Now.ToString("HH:mm:ss.fff")}",
ThemeColor = ThemeConstants.Notification.ThemeColor.Success
});
}
private void HideNotifications()
{
NotificationService.HideAll();
}
}