ngx-toastr

Whenever developers develop any kind of web application, they try to use the common case of sending notification. We might have seen some instances where there are various notification coming up in front while surfing across the web application. So, in this tutorial we will learn how we can show notifications because this is what ngx-toastr is used for. It is an interesting topic in Angular where we send toastr notification in any Angular application.

Creating Angular Application

When it comes to creating any Angular application, all we need to is to begin it creating from scratch by making sure that we are having CLI for Angular in our system. So, the below given steps would be helping in carrying out installation of Angular CLI.

The given command replicates the CLI command by creating an instant boilerplate for our Angular web app. Next, we need to move to project directory to get started with our application.

The above given command will create our Angular application and we will have an Angular web app running at http://localhost:4200.

Component Creation in Angular

Starting from the ground level, we need to remove all the existing default components file from src/app. This path can be seen when we navigate to the folder where the Angular is installed. Next, we need be assured that we don't move the default components except for the data present in app.module.ts.

After this step, we need to create a root component using the CLI tool for the Angular. The following command would do the task of root creation.

After this step, we need to remove the AppComponent reference residing in the same folder that we didn't remove i.e app.module.ts and set the RootComponent that can be thought of the bootstrap component.

Now, navigate to the app/root/root.component.html file. We have generated a sample code snippet shown below that shows how the flow works with HTML.

Now, save the changes made in the above code and schedule the Angular application by restarting it again. We will now be able to see the RootComponent. This can be visualized by looking at the RootComponent with a button rendered in the web browser.

Jscrambler Protection

Any application needs security. So, for our application, we also need to setup some of the security or technical rules so the usage of ngx-toastr. For the sake of ease, we have named it as angular alert app. So, the following commands need to put in the Angular CLI so that Angular ngx-toastr can be added.

Once we have installed the above packages with the help of the above command, we need to open the <project-directory/angular.json> file. After this step, we need to include the CSS for toastr.

Now, we need to BrowserAnimationsModule and ToastrModule. It is usually present in app.module.ts from where you need to import both the modules. To demonstrate this, we included the sample code snippet shown below.

For a developer to use the ngx-t0astr module, we need to include Root component by placing the ToastService in it.

Now, the next step involves initiating the ToastrService for the constructor method present in the RootComponent.

To demonstrate this, use the following code snippet by including the method from the root.component.ts file.

Now, after the above code is applied, we need to save the changes and the server needs to be restarted. We need to click on the Show Toastr button by running the application on the server end on http://localhost:4200/. We will now be able to see whatever the toast message has.

Demonstration of Toastr

Custom Wrapper

There is an important saying by most developers that whenever we make use of any external module in our web application, it is highly recommended to include a wrapper for it. This is because by including wrapper we can be assured about the future occurrences that need some replacement associated with the inclusion of third party module or external module. So it is always better to write wrapper for the application so that our application is saved from breaking or rewriting. With the statement being said, let's see how we can add the wrapper for our Angular application using ngx-toastr.

So, we will create an Angular service and name it as notification. It will be later used by the application for sending or showing the toastr message. So, we need to navigate to the src/app and create a folder there with the named as utility. Next, we need to navigate to the utility folder and inside it we have to create a service for Angular.

Generating ng service notification

By importing the service of ngx-toastr and placing it inside the NotificationService, we will first create the method of showSuccess. It generally shows the successful notification toasts. Thus, if we take a closer look at the notification.service.ts file, the following code snippet might resemble.

After this step, we need to import the NotificationService wrapper inside the RootComponent that we created earlier. Now, it should call the showSuccess method for the messages in toastr and the root.component.ts file should have the following resemblance.

If there exists a situation where we need to replace the module and remove the ngx-toastr module, we will first modify the NotificationService and the remaining part of the application needs no changes at all.

Toastr Notification customization

The ngx-toastr provides various kinds of options that can be used to customize the notification of our application. We might have seen it in the devices where we can modify the frequency of the notifications. In similar perspective, we can control the way toast notifications and can render them anytime.

Additionally, we can also add some HTML content inside our toast notification message. It can be done by simply enabling the available content present inside the notification file of toast and enabling it using the enableHtml option.

Consider that we are adding a new method to the notification.service.ts file so that we can render the HTML present inside the toast notification. The demonstration of it can be seen in the code snippet given below.

Now, we need to call the above message by clicking on the button and it will generate the HTML content present in the toastr notification.

Controlling Notification Display Time

There's another feature that ngx-toastr provide in terms of how the notifications are displayed. We can easily increase or decrease the time by using an option called timeOut and it is calculated in milliseconds.

Summary

In this tutorial, we learned how to integrate ngx-toastr and show notifications in any Angular application. We also came across the agenda on how to customize the notification like we see in most of the Angular based web applications. Later, we saw how can time of the toastr notification template can be modified and used in accordance with the application requirement. Ngx-toastr is not just confined to Angular application. It can be easily integrated with any web application that has users who need certain remainders of notifications since it is quite difficult to manage these notifications all at once. This is where ngx-toastr plays a crucial role.

For better understanding and deep insights, it is recommended to try out the code snippets shown in this tutorial.