JAVASCRIPT

how to add toaster in angular 9

npm install ngx-toastr --save

add toaster in angular

npm install ngx-toastr --save
//or
npm install ngx-toastr@13.2.1 --save

npm install @angular/animations --save

//angular.json
"styles": [
              "src/styles.css",
              "node_modules/ngx-toastr/toastr.css"              
            ],
//-----------app.Module.ts----------------------------
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
   
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToastrModule } from 'ngx-toastr';
   
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ToastrModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

//-----------------------------------------------------------
//app.Component.html 
<h1>Angular 12 Toastr Notifications Example</h1><br>
   
<button (click)="showToasterSuccess()" class="btn btn-success">
    Success Toaster
</button>&nbsp;
   
<button (click)="showToasterError()" class="btn btn-danger">
    Error Toaster
</button>&nbsp;
   
<button (click)="showToasterInfo()" class="btn btn-info">
    Info Toaster
</button>&nbsp;
   
<button (click)="showToasterWarning()" class="btn btn-warning">
    Warning Toaster
</button>&nbsp;


//---------------app.Component.ts----------------------
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 = 'toaster-not';
   
  constructor(private toastr: ToastrService) { }
   
  showToasterSuccess(){
    this.toastr.success("Data shown successfully !!", "Data shown successfully !!")
  }
   
  showToasterError(){
    this.toastr.error("Something is wrong", "Something is wrong")
  }
   
  showToasterInfo(){
    this.toastr.info("This is info", "This is info")
  }
   
  showToasterWarning(){
    this.toastr.warning("This is warning", "This is warning")
  }
}

install toastr in angular

npm install ngx-toastr --save