Angular 7/8 | Adding Toastr Messages in Angular 4+ Web Application in Few Steps

The application becomes more user-friendly when the user gets information about what is happening on screen. Whether its mobile or a Web Application showing messages like Success, Error or Notification in Toasts format is very common.

Toasts are floating elements on the screen which fades away after some time or by some user interactions like click or tap on it. These do not cover the space area and looks awesome due to beautiful animations and colors.

In this post, we will discuss How to Add Toast Messages in Angular 4+ Applications. Currently, our Angular application is in the latest 7 version created through Angular CLI.

Let’s get started!

Here we will use “ngx-toastr” plugin in our application

First, install ngx-toastr’s through npm package in cli


Toastr also required animations as dependency


Then open app.module.ts file and import Toastr module and BrowserAnimationsModule in it

After that, you can simply use Toastr in any component or service


Here we will create a new service MyToasterService which will import toaster class ToastrService & IndividualConfig.

The IndividualConfig is used to make option configurations in Toasts.

create a new service mytoaster.service.ts as shown below:

Now to use MyToasterService in the project, we need to add it in app.module.ts file under providers array:

Finally, you can use the toast’s show method in any component as shown below:


You can get more details about the options available and see the working demo here.

Leave a Reply

Notify of