DEV Community

Cover image for Angular : How to add Toastr in your angular project just in 15 minutes?
Rajesh Kumar Yadav
Rajesh Kumar Yadav Subscriber

Posted on • Originally published at developersdiscussion.com

Angular : How to add Toastr in your angular project just in 15 minutes?

#angular #typescript #node #javascript

Demo -

Image

Step 1 - Install dependancies for toastr and animation in your project.

Open your terminal in project folder and run below command -

npm install ngx-toastr --save
Enter fullscreen mode Exit fullscreen mode

@angular/animations package is a required dependency for the default toast

npm install @angular/animations --save
Enter fullscreen mode Exit fullscreen mode

Step 2 - Add Toastr Styles in your project

Add few styles based on your requirements -

/ regular style toast @import '~ngx-toastr/toastr'; // bootstrap style toast  // or import a bootstrap 4 alert styled design (SASS ONLY)  // should be after your bootstrap imports, it uses bs4 variables, mixins, functions  @import '~ngx-toastr/toastr-bs4-alert'; // if you'd like to use it without importing all of bootstrap it requires  @import '~bootstrap/scss/functions'; @import '~bootstrap/scss/variables'; @import '~bootstrap/scss/mixins'; @import '~ngx-toastr/toastr-bs4-alert';
Enter fullscreen mode Exit fullscreen mode

If you are using angular-cli you can add it to your angular.json

"styles": ["styles.scss", "node_modules/ngx-toastr/toastr.css" // try adding '../' if you're using angular cli before 6]
Enter fullscreen mode Exit fullscreen mode

Step 3 - add ToastrModule to app NgModule, make sure you have BrowserAnimationsModule as well

app.module.ts

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { ToastrModule, ToastContainerModule } from 'ngx-toastr'; import { AppComponent } from './app.component'; @NgModule({ declarations: [AppComponent], imports: [ BrowserModule, BrowserAnimationsModule, ToastrModule.forRoot({ positionClass: 'inline' }), ToastContainerModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule {}
Enter fullscreen mode Exit fullscreen mode

Step 4 - Add a div with toastContainer directive on it.

CODE:

import { Component, OnInit, ViewChild } from '@angular/core'; import { ToastContainerDirective, ToastrService } from 'ngx-toastr'; @Component({ selector: 'app-root', template: ` <h1><a (click)="onClick()">Click</a></h1> <div toastContainer></div>` }) export class AppComponent implements OnInit { @ViewChild(ToastContainerDirective, {static: true}) toastContainer: ToastContainerDirective; constructor(private toastrService: ToastrService) {} ngOnInit() { this.toastrService.overlayContainer = this.toastContainer; } onClick() { this.toastrService.success('in div'); } }
Enter fullscreen mode Exit fullscreen mode

Extra Bits-

How to handle toastr click/tap action?

showToaster() { this.toastr.success('Hello world!', 'Toastr fun!').onTap.pipe(take(1)).subscribe(() => this.toasterClickedHandler()); } toasterClickedHandler() { console.log('Toastr clicked'); }
Enter fullscreen mode Exit fullscreen mode

Buy Me A Coffee

With all that being said, I highly recommend you keep learning!

Thank you for reading this article. Please feel free to connect with me on LinkedIn and Twitter.

Top comments (0)