How to implement toastr notifications in angular 8?

Hello to all, welcome to therichpost.com. In this post, I will tell you, How to implement toastr notifications in angular 8?

I am showing toastr notifications in Angular 8 button click event. We can use this in many ways. Here is the working picture of Toastr Notifications in Angular 8 Application:

Here are the working steps and please follow carefully:

1. Here are the basics commands to install angular 8 on your system:

npm install -g @angular/cli 

ng new angulartoastr //Create new Angular Project

$ cd angulartoastr // Go inside the Angular Project Folder

ng serve --open // Run and Open the Angular Project

http://localhost:4200/ // Working Angular Project Url

2. After done with above, you need to run below commands to set toastr environment into your angular 8 application:

npm install ngx-toastr --save

npm install @angular/animations --save

3. Now you need to add below code into your angular.json file:

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

4. Now you need to add below code into your src/app/app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToastrModule } from 'ngx-toastr';
import { AppComponent } from './app.component';

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

5. Now you need to add below code into your src/app/app.component.ts file:

import { Component } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angulartoastr';
  constructor(private toastr: ToastrService) {}
  showSuccess() {
    this.toastr.success('Hello world!', 'Toastr fun!',
    {timeOut: 2000});;
  }
  showError() {
  this.toastr.error('everything is broken', 'Major Error', {
  timeOut: 3000
});
}
}

5. Now you need to add below code into src/app/app.component.html file:

<div style="text-align:center">
  <h1>
    Angular Toastr:
  </h1>
</div>
<button (click) = "showSuccess()">Oprn Angular Toastr Success</button>
<br/><br/>
<button (click) = "showError()">Oprn Angular Toastr Error</button>

This is it and if you have any query related to this post then please do comment below.

Jassa

Thank you