ngx-toastr in angular 8 | Part-2

This article is continuation of ngx-toastr-in-angular8. In this article will cover how to create custom notification of toastr like

• Message as HTML
• custom TimeSpan
• Message at Bottom with Full Width
• Message at top with Full Width etc.

Let's create a new component named as custom-toastr 

ng g c custom-toastr --spec=false

As we are not implement the testing of the file so disable as --spec=false.

Also we add a Service.ts file to communicate with custom-toastr.ts. To create the service.ts file, create a folder name Utility then add the service file.

ng g s notification  --spec=false

You can see the utility folder with service.ts is dynamically created

Open the Notification.service.ts file and add the custom method.

import { Injectable } from '@angular/core';  
 import { ToastrService } from 'ngx-toastr';  
 @Injectable({  
  providedIn: 'root'  
 })  
 export class NotificationService {  
  constructor(private toastr: ToastrService) { }  
  showSuccess(message, title) {  
   this.toastr.success(message, title);  
  }  
  showHTMLMessage(message, title) {  
   this.toastr.success(message, title, {  
    enableHtml: true  
   });  
  }  
  showSuccessWithTimeout(message, title, timespan) {  
   this.toastr.success(message, title, {  
    enableHtml: true,  
    timeOut: timespan  
   });  
  }  
  showFullWidthBottom(message, title) {  
   this.toastr.info(message, title, {  
    enableHtml: true,  
    positionClass: 'toast-bottom-full-width',  
   });  
  }  
  showFullWidthTop(message, title) {  
   this.toastr.info(message, title, {  
    enableHtml: true,  
    positionClass: 'toast-top-full-width',  
   });  
  }  
 }  

Open the custom-toastr.ts file and call the javascript method in Notification.service.ts.

import { Component, OnInit } from '@angular/core';  
 import { NotificationService } from '../utility/notification.service';  
 @Component({  
  selector: 'app-custom-toastr',  
  templateUrl: './custom-toastr.component.html',  
  styleUrls: ['./custom-toastr.component.css']  
 })  
 export class CustomToastrComponent implements OnInit {  
  constructor(private notifyService: NotificationService) { }  
  ngOnInit() {  
  }  
  showToaster() {  
   this.notifyService.showSuccess('Data shown successfully !!', 'Notification');  
  }  
  showHtmlToaster() {  
   this.notifyService.showHTMLMessage('<b style="Color:Red;">HTML Data shown successfully !!</b>', 'Notification');  
  }  
  showTimeSpan() { // Timespn should be on milliseconds  
   this.notifyService.showSuccessWithTimeout('<b style="Color:Red;">HTML Data shown successfully !!</b>', 'Notification', 10000);  
  }  
  showButtom() {  
   this.notifyService.showFullWidthBottom('<b style="Color:Red;">HTML Data shown successfully !!</b>', 'Notification');  
  }  
  showTop() { 
   this.notifyService.showFullWidthTop('<b style="Color:Red;">HTML Data shown successfully !!</b>', 'Notification');  
  }  
 }  

Open the custom-toastr.html we call the methods like as below

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title"> Custom 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)="showToaster()">
            </div>
            <div class="col-md-2">
                <input type="button" class="btn btn-primary" value="HTML message" (click)="showHtmlToaster()">
            </div>
            <div class="col-md-2">
                <input type="button" class="btn btn-Secondary" value="Show Timespan" (click)="showTimeSpan()">
            </div>
            <div class="col-md-2">
                <input type="button" class="btn btn-Info" value="Show Bottom" (click)="showButtom()">
            </div>
            <div class="col-md-2">
                <input type="button" class="btn btn-Info" value="Show Top" (click)="showTop()">
            </div>
        </div>
    </div>
</div>

Finally add the <custom-toastr> in app.component.html like below

Then run the application and see the output like below.

The HTML message and notification is show in TOP and Bottom accordingly.

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

Summary

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