Angular-7 Toastr Notifications Default/Custom

To create a brand new Angular 7 application we need have below configurations:

1. Install NPM. Angular requires Node.js in your system (version 8.x or above)

ü You can download the Node JS in below location. Download the latest version of node according to the OS.

https://nodejs.org/en/

ü If you are already install the node in your system to verify the version open the command shell.

node –v

npm –v

I have node version V11.10.1 and npm Version 6.7.o

2. Install Angular CLI. After you've installed NPM.

ü To install angular CLI open power shell command and type and hit enter.

npm install -g @angular/cli

ü If you already install to check the version in power shell command type

3. Install Typescript.

ü Install typescript follow the below path

https://www.typescriptlang.org/

ü If it is installed on your machine to check the version

tsc -v

4. Install VS Code (The best editor that I have used so far).

https://code.visualstudio.com/

That’s it the configuration. Now we create an angular 7 Project and go for Toastr Notification both (Default/ Custom).

o To create a brand new angular 7 Project we need to type in Power Shell command :

v ng new IAMJT-Toastr

1. We will make routing as Yes and Style sheet as CSS

2. It will take several minutes/seconds to download in your desired path according to the OS

3. After install through CLI move to the directory of project

v cd IAMJT-Toastr

Open the Project in below command in Visual Studio Code

v code .

o We need to install some packages for styling/ Toastr through terminal window.

v npm install bootstrap3 –save

For styling the Form through bootstrap

v npm install ngx-toastr –save

For Toastr nofication

v npm install @angular/animations –save

@angular/animations package is a required dependency for the default toast

o After all the required packages installed on the project add this library in angular.json file.

"node_modules/ngx-toastr/toastr.css",

"node_modules/bootstrap3/dist/css/bootstrap.min.css"

o The module.ts in root folder automatically added the components

o Firstly we create Default Toastr notiofication

· Create the components with the below commands

v ng g c my-toastr –spec=false

As we don’t require test file so I ran –spec=false

· Open the my-toastr.ts file add the Toastr service

import { ToastrService } from 'ngx-toastr';

· As we have to show SUCCESS/DANGER/ERROR/INFO toastr so the ts file look like below:

· In the my-toastr.componenet.html look like.

· In app.component.html file we call the default selector and some html element added for bootstrapping in html file like below.

· The Default Toastr notification is complete now run the project with below command:

v ng s –o

ng serve open use for start the application in browser and it look like:

o Then we go for create Custom Toastr notiofication

· To create the custom notification service we need to add the component

v ng g c custom-toastr –spec=false

As we don’t require test file so I ran –spec=false

· Also we need to add a Service.ts file for to communicate with custom-toastr.ts. To create the service.ts file, create a folder name Utility then add the service file

v ng g s notification –spec=false

· Once the Service class is created we import the ngx-toastr in to it and add the Custom element like

1. Message as HTML

2. TimeSpan

3. Message at Bottom with Full Width

4. Message at top with Full Width etc..

· Finally my Notification.service.ts file look likes: