Skip to content

Commit 228598e

Browse files
dimodidimodi
committed
kb(Notification): Add KB for single Notification instance
1 parent 3a913c4 commit 228598e

File tree

2 files changed

+198
-1
lines changed

2 files changed

+198
-1
lines changed

‎components/notification/overview.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -130,4 +130,4 @@ You can find more information on opening, closing and hiding the Notification in
130130

131131
* [Live Demo: Notification](https://demos.telerik.com/blazor-ui/notification/overview)
132132
* [Notification API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikNotification)
133-
* [One Notification Instance for All Components Sample Project](https://github.com/telerik/blazor-ui/tree/master/notification/single-instance-per-app)
133+
* [Reuse One Notification Instance]({%slug notification-kb-single-instance%})

‎knowledge-base/notification-single-app-instance.md‎

Lines changed: 197 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,197 @@
1+
---
2+
title: Reuse One Notification Instance in the App
3+
description: Learn how to define and use a single Telerik Notification component instance in a Blazor application.
4+
type: how-to
5+
page_title: How to Reuse a Single Notification Component Instance in the App
6+
slug: notification-kb-single-instance
7+
tags: telerik, blazor, notification
8+
ticketid: 1627975, 1602587, 1591578, 1579647
9+
res_type: kb
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>Notification for Blazor</td>
19+
</tr>
20+
</tbody>
21+
</table>
22+
23+
## Description
24+
25+
This KB article answers the following questions:
26+
27+
* How to use a single Telerik Notification component for Blazor in multiple other Razor files?
28+
* How to reuse one Notification instance in the whole Blazor application?
29+
30+
## Solution
31+
32+
There are two possible ways to implement a reusable Notification component instance:
33+
34+
* [Pass the Notification in a Cascading Value](#pass-the-notification-in-a-cascading-value)
35+
* [Use the Notification as a Service](#use-the-notification-as-a-service)
36+
37+
### Pass the Notification in a Cascading Value
38+
39+
1. [Define a Telerik Notification component]({%slug notification-overview%}#creating-blazor-notification) in `MainLayout.razor`.
40+
1. [Set the Notification `@ref` attribute]({%slug notification-overview%}#notifications-reference-and-methods). Use an `internal` or `public` accessor.
41+
1. 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.
42+
1. Consume the `MainLayout` instance in child Razor components as a `[CascadingParameter]` and access the Notification instance methods through the `MainLayout` instance.
43+
44+
>caption Reuse a Notification as a CascadingValue
45+
46+
<div class="skip-repl"></div>
47+
48+
````MainLayout.razor
49+
@inherits LayoutComponentBase
50+
51+
<TelerikRootComponent>
52+
53+
<TelerikNotification @ref="@NotificationRef" />
54+
55+
<CascadingValue Value="@this" Name="MainLayoutRef" IsFixed="true">
56+
@Body
57+
</CascadingValue>
58+
59+
</TelerikRootComponent>
60+
61+
@code {
62+
internal TelerikNotification? NotificationRef { get; set; }
63+
}
64+
````
65+
````_Imports.razor
66+
@using YourAppName.Components.Layout
67+
````
68+
````Home.razor
69+
@page "/"
70+
71+
<PageTitle>Home</PageTitle>
72+
73+
<TelerikButton OnClick="@ShowNotification">Show Notification</TelerikButton>
74+
75+
<TelerikButton OnClick="@HideNotifications">Hide All Notifications</TelerikButton>
76+
77+
@code {
78+
[CascadingParameter(Name = "MainLayoutRef")]
79+
public MainLayout? MainLayoutRef { get; set; }
80+
81+
private void ShowNotification()
82+
{
83+
MainLayoutRef?.NotificationRef?.Show(new NotificationModel()
84+
{
85+
Text = $"Notification at {DateTime.Now.ToString("HH:mm:ss.fff")}"
86+
});
87+
}
88+
89+
private void HideNotifications()
90+
{
91+
MainLayoutRef?.NotificationRef?.HideAll();
92+
}
93+
}
94+
````
95+
96+
### Use the Notification as a Service
97+
98+
1. Implement a service that holds a Notification component instance as a property and executes component methods.
99+
1. Register the service in `Program.cs`.
100+
1. [Define a Telerik Notification component]({%slug notification-overview%}#creating-blazor-notification) in `MainLayout.razor`.
101+
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.
102+
1. Inject and use the service in other Razor components.
103+
104+
>caption Reuse a Notification in a service
105+
106+
<div class="skip-repl"></div>
107+
108+
````NotificationService.cs
109+
using Telerik.Blazor.Components;
110+
111+
namespace YourAppName.Services
112+
{
113+
public class NotificationService
114+
{
115+
public TelerikNotification? NotificationRef { get; set; }
116+
117+
public void Show(string text, string? themeColor = null)
118+
{
119+
NotificationRef?.Show(new NotificationModel()
120+
{
121+
Text = text,
122+
ThemeColor = themeColor
123+
});
124+
}
125+
126+
public void Show(NotificationModel notificationModel)
127+
{
128+
NotificationRef?.Show(notificationModel);
129+
}
130+
131+
public void HideAll()
132+
{
133+
NotificationRef?.HideAll();
134+
}
135+
}
136+
}
137+
````
138+
````Program.cs
139+
builder.Services.AddSingleton<NotificationService>();
140+
````
141+
````_Imports.razor
142+
@using YourAppName.Services
143+
````
144+
````MainLayout.razor
145+
@inherits LayoutComponentBase
146+
147+
@inject NotificationService NotificationService
148+
149+
<TelerikRootComponent>
150+
151+
<TelerikNotification @ref="@NotificationService.NotificationRef" />
152+
153+
<CascadingValue Value="@this" Name="MainLayoutRef" IsFixed="true">
154+
@Body
155+
</CascadingValue>
156+
157+
</TelerikRootComponent>
158+
````
159+
````Home.razor
160+
@page "/"
161+
162+
@inject NotificationService NotificationService
163+
164+
<PageTitle>Home</PageTitle>
165+
166+
<TelerikButton OnClick="@ShowTextNotification">Show Simple Notification</TelerikButton>
167+
168+
<TelerikButton OnClick="@ShowIconNotification">Show Rich Notification</TelerikButton>
169+
170+
<TelerikButton OnClick="@HideNotifications">Hide All Notifications</TelerikButton>
171+
172+
@code {
173+
private void ShowTextNotification()
174+
{
175+
NotificationService.Show($"Notification at {DateTime.Now.ToString("HH:mm:ss.fff")}");
176+
}
177+
178+
private void ShowIconNotification()
179+
{
180+
NotificationService.Show(new NotificationModel()
181+
{
182+
Icon = SvgIcon.Check,
183+
Text = $"Notification at {DateTime.Now.ToString("HH:mm:ss.fff")}",
184+
ThemeColor = ThemeConstants.Notification.ThemeColor.Success
185+
});
186+
}
187+
188+
private void HideNotifications()
189+
{
190+
NotificationService.HideAll();
191+
}
192+
}
193+
````
194+
195+
## See Also
196+
197+
* [Notification Overview]({%slug notification-overview%})

0 commit comments

Comments
 (0)