How to add toastr module to Angular project

In any web application showing the alert or message to indicate the different status is required functionality to have which help to understand the users what is happening under the hood.

Install ngx-toastr plugin

First, open the terminal and run the following command inside your project to install the ngx-toastr plugin

npm install ngx-toastr --save

Next, you need to install animation package which is required to toastr plugin.

npm install @angular/animations --save

Applying toastr styling

Next open angular.json and add the following style which is required for toastr.

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

Import toasrt module

Next open app.module.js file and import BrowserAnimationsModule and ToastrModule.

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

import { ToastrModule } from 'ngx-toastr';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ToastrModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})

How to show toastr

First, you should apply ToastrService to the component where you want to show the toastr. Also need to initiate through the constructer method. Then you can use different methods like success, warning, error based on your requirement.

import { ToastrService } from 'ngx-toastr';

export class LandingComponent implements OnInit {


  constructor(private toastr:ToastrService) { }

  ngOnInit(): void {
  }

  showToastr(){
    this.toastr.success('This is the success toastr')
  }

}

Add a title to toastr

The first parameter of the method success accept the message and you can pass the title for the second parameter.

showToastr(){
    this.toastr.success('This is the success toastr',"Success")
  }

Change the toastr position

By default, toastr will appear in the right top corner. This can be changed by setting positionClass when importing the module.

ToastrModule.forRoot({
            positionClass: 'toast-top-center'
})

Disable multiple/ duplicate toastr

If you click the button multiple times you can see a lot of toastrs appear on the screen. To prevent that you can disable the duplicates.

ToastrModule.forRoot({
            preventDuplicates: true
})

Show close button in the toastr

ToastrModule.forRoot({
        closeButton:true
    })

Change the toastr dismiss time out

Default toastr will disappear after 5 seconds. This can be changed by setting timeOut property. This accepts a value as milliseconds and makes sure to convert seconds to milliseconds before adding.

ToastrModule.forRoot({
        timeOut:2000
})

Restrict no of toastrs that can be appeared at a time

If you want to show multiple toastrs and need to control the maximum numbers, maxOpened property will allow to do that.

ToastrModule.forRoot({
        maxOpened:2
})

Setting up toastr level configurations

Previously we show the way of adding different config root levels which will affect all toastrs. But you can add those in toastr level if you required different configs for different places in the app.

showToastr(){
    this.toastr.success('This is the success toastr',"Success")
    this.toastr.error('This is the error toastr',"Error",{
      timeOut:10000,
      closeButton:true
    })
  }

Connect with me - Instagram |Blog |Youtube