Install ngx-toastr using npm

ngx-toastr

npm install ngx-toastr --save

In order to use animation, please install below using npm

@angular/animations

npm install @angular/animations --save

No Dependencies for this module.

Include css file in angular.json file inside styles":[ ]

path

node_modules/ngx-toastr/toastr.css

Add ToastModule, ToastOptions into your AppModule class. And also import CustomOption which will extend ToastOptions and where you can define custom configurations. app.module.ts would look like this

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

@NgModule({
imports: [BrowserAnimationsModule, ToastModule.forRoot()],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {

}
            

toastr.component.html would look like this

<button type="button" class="btn btn-success btn-block" id="type-success" (click)="typeSuccess()">Success</button>
                    

Import ToastrService in ToastrComponent class. toastr.component.ts would look like this

import { Component, ViewEncapsulation  } from '@angular/core';
import { NGXToastrService } from './toastr.service'
@Component({
    selector: 'app-toastr',
    templateUrl: './toastr.component.html',
    providers: [NGXToastrService]
})

export class ToastrComponent {
constructor( private service : NGXToastrService){}

    // Success Type
    typeSuccess() {
        this.service.typeSuccess();
    }
}
                

import { ToastsManager } from 'ngx-toastr/ngx-toastr';
import { Injectable } from '@angular/core';

@Injectable()
export class NGXToastrService {
    constructor(public toastr: ToastsManager) { }


    // Success Type
    typeSuccess() {
        this.toastr.success('You are awesome!', 'Success!');
    }
}