How to Create Toastr in Angular Project

Implement toastr notification in angular

In this article, You will learn how to use toastr notification in angular project. At the end of this you will be able to implement toastr notification by yourself.

Image source: Google

1. Install ngx-toastr

First step is to install ngx-toastr in angular project or paste the below command at the terminal of VS Code.

npm i ngx-toastr

2. Import the CSS

Second step is to import the css of toastr in your styles.scss file which is at root of the project.

// regular style toast
@import '~ngx-toastr/toastr';

// bootstrap style toast
// or import a bootstrap 4 alert styled design (SASS ONLY)
// should be after your bootstrap imports, it uses bs4 variables,        mixins, functions
@import '~ngx-toastr/toastr-bs4-alert';

3. Import Toastr Module

Third, import toastr module in app.module.ts file. You should have BrowserAnimationsModule also for displaying proper toastr notification.

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

import { ToastrModule } from 'ngx-toastr';

@NgModule({
  imports: [
    BrowserAnimationsModule,     // required animations module
    ToastrModule.forRoot(),     // ToastrModule added
  ],
  bootstrap: [App],
  declarations: [App],
})
class MainModule {}

How to Use it ??

1. Import ToastrService from ngx-toastr in ts file where you want toastr.
2. Inject a variable of type ToastrService in constructor.
3. Call the required method for displaying toastr.

import { ToastrService } from 'ngx-toastr';

@Component({...})
export class YourComponent {
  constructor(private toastr: ToastrService) {}

  showSuccess() {
    this.toastr.success('Hello world!');
  }
}

Save your Project , run it and you are good to go.