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

$ npm install ngx-toastr --save

Toastr also required animations as dependency

$ npm install @angular/animations --save

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

...
...

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

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    ...
    ...
    
    BrowserAnimationsModule, // required animations module
    ToastrModule.forRoot() // ToastrModule added
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

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

...
...

import { ToastrService } from 'ngx-toastr';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {

  constructor(
    private toastr: ToastrService
  ) {
  }

  showSuccess(){
    this.toastr.success('Hello world!', 'Toastr fun!',{
      disableTimeOut:true
    });
  } 
}

Configuration

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:

// mytoaster.service.ts
import { Injectable } from '@angular/core';
import { ToastrService, IndividualConfig } from 'ngx-toastr';

@Injectable()
export class MyToasterService {

    options: IndividualConfig;

    constructor(
        private toastr: ToastrService
    ) {
        this.options = this.toastr.toastrConfig;
        this.options.positionClass = 'toast-top-center';
        this.options.timeOut = 1500;
    }

    showToast(title, message, type) {
        this.toastr.show(message, title, this.options, 'toast-' + type);
    }

}

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

// app.module.ts

...
...

// Show toaster messages
import { ToastrModule } from 'ngx-toastr';
import { MyToasterService } from './shared/services/global/mytoaster.service';


@NgModule({
    imports: [
		...
		...	
    ],
    declarations: [AppComponent],
    providers: [
        MyToasterService
    ],
    bootstrap: [AppComponent]
})
export class AppModule {}

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

// MyFooComponent
import { Component, OnInit, ViewChild } from '@angular/core';
import { ToasterService } from 'src/app/shared/services/global/toaster.service';

@Component({
  selector: 'app-my-foo-component',
  templateUrl: './my-foo.component.html',
  styleUrls: ['./my-foo.component.scss']
})
export class MyFooComponent implements OnInit {


  constructor(
    private toaster: ToasterService
  ) {
		this.toaster.showToast('My Toast Title', 'Component Toast Loaded!!!', 'success');
  }

}

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