Header add

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

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.
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
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
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
In the app.module.ts file change the highlighted mark like below.
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';  
      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.');  
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 class="panel-body">  
         <div class="row">  
           <div class="col-md-2">  
             <input type="button" class="btn btn-success" value="Success Notification"  
           <div class="col-md-2">  
             <input type="button" class="btn btn-warning" value="Warning Notification" (click)="showToasterDanger()">  
           <div class="col-md-2">  
             <input type="button" class="btn btn-danger" value="Error Notification" (click)="showToasterError()">  
           <div class="col-md-2">  
             <input type="button" class="btn btn-info" value="Information Notification" (click)="showToasterInfo()">  

Open the "app.component.html" in root folder and the <app-my-toastr> 
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/

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.

Post a Comment

Previous Post Next Post