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

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:

  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

@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

  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

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

See Also

In this article