ngx-toastr in angular 8

In this article we will learn how to implement ngx-toastr prompt using Angular. If you are new to angular-8 then follow the article how-to-create-angular8-project-using-angular-cli

Step-1
To create a brand new angular 8 Project we need to type in Power Shell command

ng new myng-toastr

Make routing as Yes and stylesheet as css
Navigate to destination path and open the code in Visual Studio code.
Step-2
Now we need to install 3-packages for styling and toastr notification through terminal window.

/* For styling the Form through bootstrap */
npm install bootstrap3 --save
/* For Toastr nofication */
npm install ngx-toastr --save
/* @angular/animations package for the default toast */
npm install @angular/animations --save

Step-3
After all the required packages installed on the project add this library in angular.json file.

Need to add the two css in angualr.json file

Step-4
Add a new component using below command named as my-toastr

ng g c my-toastr

You can see my-toastr is automatically add in module.ts

Step-5
In the app.module.ts file change the highlighted mark like below.

Step-6
Open the "my-toastr.component.ts" file and import the ToastrService and add the service message like showToasterSuccess(),showToasterDanger(),showToasterError(),showToasterInfo()

import { Component, OnInit } from '@angular/core';  
 import { ToastrService } from 'ngx-toastr';  
 @Component({  
  selector: 'app-my-toastr',  
  templateUrl: './my-toastr.component.html',  
  styleUrls: ['./my-toastr.component.css']  
 })  
 export class MyToastrComponent implements OnInit {  
  constructor(private toastr: ToastrService) { }  
  ngOnInit() {  
  }  
  showToasterSuccess() {  
   this.toastr.success('Hello, I\'m the toastr success message.');  
  }  
  showToasterDanger() {  
   this.toastr.warning('Hello, I\'m the toastr warning message.');  
  }  
  showToasterError() {  
   this.toastr.error('Hello, I\'m the toastr error message.');  
  }  
  showToasterInfo() {  
   this.toastr.info('Hello, I\'m the toastr info message.');  
  }  
 }  

Step-7
Open the "my-toastr.component.html" and add the below html and call the service method on button click

<div class="panel panel-default">  
   <div class="panel-heading">  
     <h3 class="panel-title"> Simple Toaster Component</h3>  
   </div>  
   <div class="panel-body">  
     <div class="row">  
       <div class="col-md-2">  
         <input type="button" class="btn btn-success" value="Success Notification"  
           (click)="showToasterSuccess()">  
       </div>  
       <div class="col-md-2">  
         <input type="button" class="btn btn-warning" value="Warning Notification" (click)="showToasterDanger()">  
       </div>  
       <div class="col-md-2">  
         <input type="button" class="btn btn-danger" value="Error Notification" (click)="showToasterError()">  
       </div>  
       <div class="col-md-2">  
         <input type="button" class="btn btn-info" value="Information Notification" (click)="showToasterInfo()">  
       </div>  
     </div>  
   </div>  
 </div> 

Step-8
Open the "app.component.html" in root folder and the <app-my-toastr> 

Step-9
The Now run the application using below command

ng serve --open

In the next topic we learn how to create custom-toastr notification using ngx.

</> Find the Source Code in Github.com/CoreProgramm/

Summary

In this tutorial we discussed how to generate prompt in ngx-toastr in angular 8. If have any question related to this topic then give your feedback.