diff --git a/components/notification/overview.md b/components/notification/overview.md index f95427e8e..3e3b846e1 100644 --- a/components/notification/overview.md +++ b/components/notification/overview.md @@ -130,4 +130,4 @@ You can find more information on opening, closing and hiding the Notification in * [Live Demo: Notification](https://demos.telerik.com/blazor-ui/notification/overview) * [Notification API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikNotification) -* [One Notification Instance for All Components Sample Project](https://github.com/telerik/blazor-ui/tree/master/notification/single-instance-per-app) +* [Reuse One Notification Instance]({%slug notification-kb-single-instance%}) diff --git a/knowledge-base/notification-single-app-instance.md b/knowledge-base/notification-single-app-instance.md new file mode 100644 index 000000000..ff14caf86 --- /dev/null +++ b/knowledge-base/notification-single-app-instance.md @@ -0,0 +1,202 @@ +--- +title: Reuse One Notification Instance in the App +description: Learn how to define and use a single Telerik Notification component instance in a Blazor application. +type: how-to +page_title: How to Reuse a Single Notification Component Instance in the App +slug: notification-kb-single-instance +tags: telerik, blazor, notification +ticketid: 1627975, 1602587, 1591578, 1579647 +res_type: kb +--- + +## Environment + + + + + + + + +
ProductNotification 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](#pass-the-notification-in-a-cascading-value) +* [Use the Notification as a Service](#use-the-notification-as-a-service) + +The Notification component in both scenarios must be defined: + +1. As a descendant (or child) of the [``]({%slug rootcomponent-overview%}). +1. 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]({%slug notification-overview%}#creating-blazor-notification) in `MainLayout.razor`. +1. [Set the Notification `@ref` attribute]({%slug notification-overview%}#notifications-reference-and-methods). Use an `internal` or `public` accessor. +1. Wrap the `@Body` in `MainLayout` in a `` 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. +1. Consume the `MainLayout` instance in child Razor components as a `[CascadingParameter]` and access the Notification instance methods through the `MainLayout` instance. + +>caption Reuse a Notification as a CascadingValue + +
+ +````MainLayout.razor +@inherits LayoutComponentBase + + + + + + + @Body + + + + +@code { + internal TelerikNotification? NotificationRef { get; set; } +} +```` +````_Imports.razor +@using YourAppName.Components.Layout +```` +````Home.razor +@page "/" + +Home + +Show Notification + +Hide All Notifications + +@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. +1. Register the service in `Program.cs`. +1. [Define a Telerik Notification component]({%slug notification-overview%}#creating-blazor-notification) in `MainLayout.razor`. +1. Inject the service in `MainLayout.razor` and [set the Notification `@ref` attribute]({%slug notification-overview%}#notifications-reference-and-methods) to a property of the service. +1. Inject and use the service in other Razor components. + +>caption Reuse a Notification in a service + +
+ +````NotificationService.cs +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(); + } + } +} +```` +````Program.cs +builder.Services.AddSingleton(); +```` +````_Imports.razor +@using YourAppName.Services +```` +````MainLayout.razor +@inherits LayoutComponentBase + +@inject NotificationService NotificationService + + + + + + + @Body + + + +```` +````Home.razor +@page "/" + +@inject NotificationService NotificationService + +Home + +Show Simple Notification + +Show Rich Notification + +Hide All Notifications + +@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]({%slug notification-overview%})