Toast Notifications In Blazor

In this article, we will learn how we can display notifications in blazor. We will use Blazored.Toast package to popup notification.

If you are new to blazor or follow steps to create a blazor app from here. I assume you have already created a blazor server app. Now you need to follow the below steps.

Install Blazored.Toast, to install this you need to execute below command in Package Manager Console or find Blazored.Toast in Nuget-Solution.

Install-Package Blazored.Toast

you also can install Blazored.Toast using Dotnet CLI

dotnet add package Blazored.Toast

Once you have installed Blazored.Toast package, you need to do the following steps to use Toast notification.

Register its service in Startup class. Which is available in your blazor server application.

To Register service, you need to include the following namespace.

using Blazored.Toast;

Next, register the service in the ConfigureServices() method of Startup class.

services.AddBlazoredToast();

Import following lines inside _Imports.razor file. This will allow us to use Blazored.Toast in each component without importing directive for each component.

@using Blazored.Toast
@using Blazored.Toast.Services

Add the following CSS links inside _Host.cshtml file.

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<link href="_content/Blazored.Toast/blazored-toast.css" rel="stylesheet" />

paste the following content where you want to use Toast notification, I’ll use an Index.razor component.

@page "/"

@inject IToastService toastService

<button class="btn btn-info" @onclick="@(() => toastService.ShowInfo("Welcome to TheCodehubs"))">Info Toast</button>
<button class="btn btn-success" @onclick="@(() => toastService.ShowSuccess("You are sign up successfully!"))">Success Toast</button>
<button class="btn btn-warning" @onclick="@(() => toastService.ShowWarning("You are about to leave website!"))">Warning Toast</button>
<button class="btn btn-danger" @onclick="@(() => toastService.ShowError("Oops! Error has occured"))">Error Toast</button>

In MainLayout.razor file, put below tag at end of the file.

<BlazoredToasts />

Or if you wanna customize you can use the below code and replace it with the above tag.

<BlazoredToasts Position="ToastPosition.TopRight"
                Timeout="10"
                SuccessClass="success-toast-override"
                SuccessIconClass="fa fa-check"
                ErrorIconClass="fa fa-times" 
                InfoIconClass="fa fa-info"
                WarningIconClass="fa fa-warning"/>

And That’s it, now you can use Toast notification. when you run the application and following output will display in a browser.

Recommend articles which you should read once.

1. CRUD Using Blazor, Entity Framework Core And Dapper
2. Sorting Table In Blazor
3. Pagination In Blazor
4. Searching Feature In Blazor
5. Validation In Blazor Application
6. Deploy A Blazor Application On IIS
7. Use LocalStorage In Blazor
8. Modal Popup In Blazor

hope you guys found something useful. Please give your valuable feedback/comments/questions about this article. Please let me know how you like and understand this article and how I could improve it.