This article will guide you through how to use Alert / Toast notifications in Angular 4 app.
Nowadays, every modern web application requires an awesome user experience and notifications are one of the important aspects of making the users feel well based on the overall UI.
ng2-toastr allows us to integrate toast notification in angular 4 apps. It’s easy to install and use in your apps.
So, let’s get started with Angular 4 notifications.
Install ng2-toastr In Angular 4
I am assuming that you already have the app ready if not, you can visit to create and set up your first angular 4 hello world app.
Now, let’s install ng2-toastr by using following command.
npm install ng2-toastr --save
Next, don’t forget to add toastr CSS file in your app.
angular-cli.json
"styles": [ //Other styles... "../node_modules/ng2-toastr/bundles/ng2-toastr.min.css" ],
Usage of Alert / Toast Notifications In Angular 4
Now, we’re ready to use toast notifications in Angular 4 by importing the necessary dependencies in module and component.
1. Import Toast module in main module
First of all, let’s import ToastModule in your main module.
/src/app/app.module.ts
//Import core module import {NgModule} from '@angular/core'; import {BrowserModule} from '@angular/platform-browser'; //Import app component import {AppComponent} from './app.component'; //Import toast module import {ToastModule} from 'ng2-toastr/ng2-toastr'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; @NgModule({ imports: [BrowserModule, BrowserAnimationsModule, ToastModule.forRoot()], declarations: [AppComponent], bootstrap: [AppComponent], }) export class AppModule { }
Takeaways,
- Firstly, import section has necessary module imported into the main module of app.
- Secondly, add ToastModule.forRoot() in imports section of NgModule to allows the app to use ToastModule.
2. Import and Use ToastsManager
Next, let’s inject ToastsManager in a component where you want to use toast notifications.
Here, we’re going to use toast notifications in app component.
/src/app/app.component.ts
//Import core module import { Component, ViewContainerRef } from '@angular/core'; //Import ToastsManager import { ToastsManager } from 'ng2-toastr/ng2-toastr'; @Component({ selector: 'awesome-component', template: `<button class="btn btn-default" (click)="showSuccess()">Toastr Tester</button> <button class="btn btn-default" (click)="showError()">Toastr Tester</button>` }) export class AppComponent { constructor(public toastr: ToastsManager, vcr: ViewContainerRef) { this.toastr.setRootViewContainerRef(vcr); } showSuccess() { this.toastr.success('You are awesome!', 'Success!'); } showError() { this.toastr.error('This is not good!', 'Oops!'); } showWarning() { this.toastr.warning('You are being warned.', 'Alert!'); } showInfo() { this.toastr.info('Just some information for you.'); } showCustom() { this.toastr.custom('<span style="color: red">Message in red.</span>', null, {enableHTML: true}); } }
Takeaways,
- First of all, to use ToastsManager we had to import it.
- Second, don’t forget to inject toastr in constructor and set as setRootViewContainerRef to start using it’s methods what we generally do with a traditional angular 4 services.
- Finally, start using toastr methods to call toast notifications in Angular 4 apps. Like this.toastr.success will allow you to call success method, this.toastr.error will use for error method, and many more methods available as per your need you can use them.
Note: To apply bootstrap styles, you can also start using bootstrap components along with the angular 4 toast notifications.
Finally, by clicking on a button or calling a method normally will call the respective toast notification in your browser window.
In addition, you can apply customization in Angular 4 notifications using ToastOptions Configurations.
Moreover, I hope, you loved this article and it helped you to integrate toast notifications in Angular 4 apps.Don’t forget to share!
Leave a Reply