Reuse One Notification Instance in the App

Updated over 6 months ago

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:

• Pass the Notification in a Cascading Value
• Use the Notification as a Service

The Notification component in both scenarios must be defined:

1. As a descendant (or child) of the <TelerikRootComponent>.
2. In a .razor file with enabled interactive render mode. The MainLayout is interactive only if the Blazor app has Global interactivity location.

Pass the Notification in a Cascading Value

1. Define a Telerik Notification component in MainLayout.razor.
2. Set the Notification @ref attribute. Use an internal or public accessor.
3. Wrap the @Body in MainLayout in a <CascadingValue> that passes the MainLayout instance itself. This avoids potential issues with missing Notification instance in child components on initial app load. Set IsFixed="true" to the CascadingValue to avoid unnecessary renders.
4. Consume the MainLayout instance in child Razor components as a [CascadingParameter] and access the Notification instance methods through the MainLayout instance.

Reuse a Notification as a CascadingValue

RAZOR

@inherits LayoutComponentBase

<TelerikRootComponent>

    <TelerikNotification @ref="@NotificationRef" />

    <CascadingValue Value="@this" Name="MainLayoutRef" IsFixed="true">
        @Body
    </CascadingValue>

</TelerikRootComponent>

@code {
    internal TelerikNotification? NotificationRef { get; set; }
}

RAZOR

@using YourAppName.Components.Layout

RAZOR

@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

1. Implement a service that holds a Notification component instance as a property and executes component methods.
2. Register the service in Program.cs.
3. Define a Telerik Notification component in MainLayout.razor.
4. Inject the service in MainLayout.razor and set the Notification @ref attribute to a property of the service.
5. Inject and use the service in other Razor components.

Reuse a Notification in a service

C#

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();
        }
    }
}

C#

builder.Services.AddSingleton<NotificationService>();

RAZOR

@using YourAppName.Services

RAZOR

@inherits LayoutComponentBase

@inject NotificationService NotificationService

<TelerikRootComponent>

    <TelerikNotification @ref="@NotificationService.NotificationRef" />

    <CascadingValue Value="@this" Name="MainLayoutRef" IsFixed="true">
        @Body
    </CascadingValue>

</TelerikRootComponent>

RAZOR

@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();
    }
}

See Also

• Notification Overview