Breaking News: Grepper is joining You.com. Read the official announcement!

add toaster in angular

Add Answer

Rasel Ahmed answered on August 4, 2020 Popularity 10/10 Helpfulness 4/10

answer add toaster in angular

related how to add toaster in angular 9

related install toastr in angular

add toaster in angular

Comment

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")
  }
}

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: add angular javascript

Link to this answer
Share Copy Link

Contributed on Jul 21 2022

Rasel Ahmed

0 Answers Avg Quality 2/10

Closely Related Answers

how to add toaster in angular 9

Comment

npm install ngx-toastr --save

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: www.itsolutionstuff.com

Tags: add

Link to this answer
Share Copy Link

Contributed on Aug 04 2020

Clumsy Chipmunk

0 Answers Avg Quality 2/10

install toastr in angular

Comment

npm install ngx-toastr --save

Popularity 10/10 Helpfulness 4/10 Language shell

Source: www.npmjs.com

Tags: angular

Link to this answer
Share Copy Link

Contributed on Oct 07 2020

Annoying Antelope

0 Answers Avg Quality 2/10

add toaster in angular

Contents

More Related Answers

add toaster in angular

Closely Related Answers

how to add toaster in angular 9

install toastr in angular

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.