Toastr is a JavaScript library which is used to create a notification popup.

Step 1

Create an Angular project. To create a new project, open command prompt and add the following command to create the Toastr project.
  1. ng new Toastr

Step 2

Open this project in Visual Studio Code.

Now, go to View >Terminal and install Toastr into this project by using the following npm command.

  1. npm install ngx-toastr --save

Now, add @angular/animation to the project.

  1. npm install @angular/animations --save

Step 3

Open app.module.ts and add animation and Toastr module in it, using the following line.
  1. import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  2. import { ToastrModule } from 'ngx-toastr';

Now, import the below-mentioned modules. Here is the complete App.module.ts file.

  1. import { BrowserModule } from '@angular/platform-browser';
  2. import { NgModule } from '@angular/core';
  3. import { AppRoutingModule } from './app-routing.module';
  4. import { AppComponent } from './app.component';
  5. import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  6. import { ToastrModule } from 'ngx-toastr';
  7. import { NotificationComponent } from './notification/notification.component';
  8. @NgModule({
  9. declarations: [
  10. AppComponent,
  11. NotificationComponent
  12. ],
  13. imports: [
  14. BrowserModule,
  15. AppRoutingModule, BrowserAnimationsModule,
  16. ToastrModule.forRoot()
  17. ],
  18. providers: [],
  19. bootstrap: [AppComponent]
  20. })
  21. export class AppModule { }

Step 4

Open Style.css file and import toastr.css.
  1. @import '~ngx-toastr/toastr.css';

Step 5

Let's create a component. To create a component, open terminal and add the following command.
  1. ng g c Notification

Step 6

Open the notification.component.ts file and import the ToastrService.
  1. import { ToastrService } from 'ngx-toastr';
Add the following lines to the notification.component.ts file.
  1. import { Component, OnInit } from '@angular/core';
  2. import { ToastrService } from 'ngx-toastr';
  3. @Component({
  4. selector: 'app-notification',
  5. templateUrl: './notification.component.html',
  6. styleUrls: ['./notification.component.css']
  7. })
  8. export class NotificationComponent implements OnInit {
  10. constructor(private toastr: ToastrService) { }
  12. ngOnInit() {
  13. }
  14. successmsg(){
  15. this.toastr.success("Toastr Success message",'Success')
  16. }
  17. errorsmsg(){
  18. this.toastr.error("Toastr Error Notification",'Error')
  20. }
  21. infotoastr()
  22. {
  23. this.toastr.info("Important News", 'Information');
  24. }
  25. toastrwaring()
  26. {
  27. this.toastr.warning("Battery about to Die", 'Warning');
  28. }
  29. }
In this file, we will create some function in which we use the Toastr success, info, warning, and error classes to display a message popup.
Implement Toastr notification in Angular 7
Step 7
Open the notification.component.html file and add 4 buttons and call the functions.
  1. <div style="padding: top 20px;">
  2. <input type="button" value=" Success Message" class="button" (click)="successmsg()">
  3. <input type="button" value=" Error Message" class="button" (click)="errorsmsg()">
  4. <input type="button" value=" Success Message" class="button" (click)="infotoastr()">
  5. <input type="button" value=" Info Message" class="button" (click)="toastrwaring()">
  6. </div>
Add some styles to the buttons.
  1. <style>
  2. .button {
  3. padding: 5px 20px;
  4. margin: 5px;
  5. text-align: center;
  6. text-decoration: none;
  7. display: inline-block;
  8. font-size: 14px;
  9. }
  10. </style>
Run the project and click on the buttons. The notification popup does open and gets disabled after a few seconds.
Implement Toastr notification in Angular 7
Step 8
We can change the notification popup display location. The default display is at the top-right. We can arrange it at any of the locations on a page.

  • top-center
  • top-left
  • bottom-right
  • bottom-center
  • bottom-left
To change a location, open the app.module.ts file and in the import section, make changes in the toastrmodule.forRoot function.
Implement Toastr notification in Angular 7
We can also add a button to close the notification pop up. Let's add the following lines in the app.module.ts file and run the project.
  1. ToastrModule.forRoot(
  2. {
  3. positionClass:'top-left',
  4. closeButton: true,
  6. }
  7. )
Implement Toastr notification in Angular 7
We have successfully changed the location of the notification message pop up. In the same way, we can change the notification popup location on a page.

Summary

In this article, we learned about Toastr and how we use Toastr notifications in Angular. Toastr provides some unique notification popups which we can use to display a message or any other notification within an application.