How to Create Angular Toastr Notifications

How to Create Angular Toastr Notifications

<strong>Create an Angular service called notification , which you'll use in your application for showing the toastr message. In src/app create a folder called utility . Navigate to the utility folder and create an Angular service.</strong>

Create an Angular service called notification , which you'll use in your application for showing the toastr message. In src/app create a folder called utility . Navigate to the utility folder and create an Angular service.

Note: This tutorial uses Angular CLI 6.2.4, @angular/animations 6.1.9, and ngx-toastr 9.1.0.

Showing notifications and alerts is a common use case that we encounter while developing any web application. In this tutorial, we’ll do an overview of how you can show toastr notifications in an Angular web application.

Creating an Angular Application

Let’s begin by creating an Angular web application from scratch. To get started, make sure that you have the Angular CLI installed in your system.

npm install -g @angular/cli  

Once the Angular CLI has been installed, you can use the ng tool to create an Angular web application.

ng new angular-alert-app  

The above CLI command creates a boilerplate Angular web app. Navigate to the project directory and start the web app.

cd angular-alert-app
npm start

You will have the Angular web app running at http://localhost:4200/.

Creating an Angular Component

Let’s start from the very scratch. Remove the existing default component files from src/app folder except for app.module.ts. Create a root component using the Angular CLI tool.

ng generate component root  

Remove the AppComponent reference from the app.module.ts and set the RootComponent as the bootstrap component.

Inside the app/root/root.component.html file add the following HTML code.

<button>
Show Toaster </button>

Add the following CSS style to the app/root/root.component.css file.

button{
padding: 10px; margin: 0px; background-color: red; border-radius: 100px; cursor: pointer; border: 0px; }

Save the above changes and restart the Angular application. You will be able to see the RootComponent with a button rendered in the web browser.

Adding ngx-toastr to the Angular App

Install ngx-toastr using Node Package Manager (npm). ngx-toastr also requires the @angular/animationpackage as a dependency.

npm install ngx-toastr --save
npm install @angular/animations --save

Once you have installed the above packages, open the <project-directory>/angular.json file and include the toastr CSS.

"styles": [
   "src/styles.css",
   "node_modules/ngx-toastr/toastr.css"
]

Include the BrowserAnimationsModule and ToastrModule in the app.module.ts file and import both the modules.

Here is how the app.module.ts file looks:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToastrModule } from 'ngx-toastr';

import { RootComponent } from './root/root.component';

@NgModule({ declarations: [ RootComponent ], imports: [ BrowserModule, BrowserAnimationsModule, ToastrModule.forRoot() ], providers: [], bootstrap: [RootComponent] }) export class AppModule { }

In order to use the ngx-toastr module, you need to include the ToastrService in the RootComponent.

import { ToastrService } from 'ngx-toastr';  

Instantiate the ToastrService in the RootComponent's constructor method. Define a method to show the Toast message. Inside the method, initiate the success method of the ToastrService instance.

Here is how the method root.component.ts file should look:

import { Component, OnInit } from '@angular/core';
import { ToastrService } from 'ngx-toastr';

@Component({ selector: 'app-root', templateUrl: './root.component.html', styleUrls: ['./root.component.css'] }) export class RootComponent implements OnInit {

constructor(private toastr: ToastrService) { }

ngOnInit() {

}

showToaster(){ this.toastr.success("Hello, I'm the toastr message.") }

}

Then, add the click handler to the button inside the root.component.html file.

<button (click)="showToaster()">
Show Toaster </button>

Save the above changes and restart the server. Click on the Show Toaster button when running the application on http://localhost:4200/. You will be able to view the toast message.

Adding a Custom Wrapper

Whenever you use an external module in your web application, it is always recommended to write a wrapper for it. Writing a wrapper makes sure that, in case at some point in future you need to replace the third party module, it doesn’t break your application or need a lot of rewrite.

Let’s have a look at how you can add a wrapper for ngx-toastr in your Angular application.

Create an Angular service called notification, which you’ll use in your application for showing the toastr message. In src/app create a folder called utility. Navigate to the utility folder and create an Angular service.

ng generate service notification  

Import the ngx-toastr service inside the NotificationService. Create a method called showSuccess to show success notification toasts. The notification.service.ts file should look similar to this:

import { Injectable } from '@angular/core';
import { ToastrService } from 'ngx-toastr';

@Injectable({ providedIn: 'root' }) export class NotificationService {

constructor(private toastr: ToastrService) { }

showSuccess(message, title){ this.toastr.success(message, title) } }

Import the NotificationService wrapper inside the RootComponent and call the showSuccess method to show toast messages.

Here is how the root.component.ts file looks:

import { Component, OnInit } from '@angular/core';
import { NotificationService } from '../utility/notification.service'

@Component({ selector: 'app-root', templateUrl: './root.component.html', styleUrls: ['./root.component.css'] }) export class RootComponent implements OnInit {

constructor(private notifyService : NotificationService) { }

ngOnInit() {

}

showToaster(){ this.notifyService.showSuccess("Data shown successfully !!", "Notification") }

}

In case if you need to replace the ngx-toastr with any other module, you only need to modify the NotificationService. No other part of the application needs any change.

Customizing The Toast Notification

ngx-toastr provides a number of options to customize the toast notification. You can control how you want the toast notification to render. Find more information on the official docs.

Adding HTML Content Inside Toast

ngx-toastr provides an option to add HTML code inside the toast message. To enable it to use HTML content inside the toast notification, you need to use the enableHtml option.

Add a new method inside the notification.service.ts file to render HTML inside the toast notification, as shown:

showHTMLMessage(message, title){
this.toastr.success(message, title, { enableHtml : true }) }

Call the above message on click of the button and you will have the HTML content displayed inside the toaster notification.

showHtmlToaster(){
this.notifyService.showHTMLMessage("<h2>Data shown successfully !!</h2>", "Notification") }

Control Notification Display Time

ngx-toastr also provides an option to control the time for which the notification is displayed. You can increase or decrease the time by using the timeOut option. The time unit here is milliseconds.

showSuccessWithTimeout(message, title, timespan){
this.toastr.success(message, title ,{ timeOut : timespan }) }

Wrapping It Up

In this tutorial, you learned how to use ngx-toastr to show toast notifications in an Angular web application. For detailed information on ngx-toastr, we recommend reading the official documentation.

The source code from this tutorial is available on GitHub.

Have you used any other modules to show notifications in an Angular web application? Do let us know your thoughts by tweeting to @Jscrambler.

**Also, if you’re building applications with sensitive logic, be sure to protect them against code theft and reverse-engineering by following our guide.

Originally published by Jay Raj at https://blog.jscrambler.com

Learn More

☞ Angular 7 (formerly Angular 2) - The Complete Guide

☞ Learn and Understand AngularJS

☞ Angular Crash Course for Busy Developers

☞ The Complete Angular Course: Beginner to Advanced

☞ Angular (Angular 2+) & NodeJS - The MEAN Stack Guide

☞ Become a JavaScript developer - Learn (React, Node,Angular)

☞ Angular (Full App) with Angular Material, Angularfire & NgRx

☞ The Web Developer Bootcamp

angular

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc

Angular Sass: How To Use Sass In Angular 9 Tutorial

Sass in Angular is an extension of CSS that allows you to use things like variables, nested rules, inline imports. Angular supports Sass, CSS, and Less.

How to Upgrade Angular 8 To Angular 9

Angular is currently the most popular JavaScript framework and is used by several expert developers when developing single-page applications or powerful web apps. It has become quite crucial for the developers of Angular to add more features to the framework and fix the bugs . Let's learn how to upgrade Angular 8 to Angular 9 using CLI.

Visualizing data with NGX-Charts in Angular

Data Science, Data Analytics, Big Data, these are the buzz words of today's world. A huge amount of data is being generated and analyzed every day. So communica