To show any notification, like a form has been submitted, a form edited or a row deleted, we use toaster notification. We can show notification in other way also but , toaster notification has different look and field along with other facilities like auto dismiss.

Angular Toaster notification

There are several toaster notification plugins available like
1) ng6-toastr-notifications
2) ng6-toastr
3) ngx-toastr
and many more.

We will discuss today about ng6-toastr-notifications, how to use the module in our angular project and how to control the behaviour of the module

So, lets start,

Step one : First of all we have to install the module in our angular project via npm, so we have to write the following command in terminal to install the module in our project.

npm install ng6-toastr-notifications --save

Note : To install the module in your project folder using CLI, go the project folder then run the above command.

Step two : Now add or import the module to your app.module.ts file

Step three : Add BrowserAnimationsModule to app.module.ts. BrowserAnimationsModule module will help the toaster animations to work perfectly.

So now the app.module.ts file will look like below


import { BrowserModule } from '@angular/platform-browser';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    import { NgModule } from '@angular/core';
    import { AppComponent } from './app.component';
    import { ToastrModule } from 'ng6-toastr-notifications';
 
    @NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, BrowserAnimationsModule, ToastrModule.forRoot()],
    providers: [],
    bootstrap: [AppComponent]
    })
    export class AppModule {}

Step Four : Now import ToastrManager in your component class, so component class will look like this.


 import { Component } from '@angular/core';
    import { ToastrManager } from 'ng6-toastr-notifications';
 
    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.scss']
    })
    export class AppComponent {
 
        constructor() {}
}

Step five : Now we can use the available functions of the toaster module like below


 import { Component } from '@angular/core';
    import { ToastrManager } from 'ng6-toastr-notifications';
 
    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.scss']
    })
    export class AppComponent {
 
        constructor(public mytoaster: ToastrManager) {}

     successMsg() {
            this.mytoaster.successToastr('This is success message.', 'Success');
        }
 
        errorMsg() {
            this.mytoaster.errorToastr('This is error message.', 'error');
        }
 
        warningMsg() {
            this.mytoaster.warningToastr('This is warning message.', 'Warning');
        }
 
        infoMsg() {
            this.mytoaster.infoToastr('This is info message.', 'Information');
        }
  toastMsg(position: any = 'top-left') {
            this.mytoaster.infoToastr('This is a positioned message .', 'Toast', {
                position: position
            });
        }
        customMsg() {
            this.mytoaster.customToastr(
            'Custom message',
            null,
            { enableHTML: true }
            );
        }
 
       
}

For more details about configuration please click here

Leave comment

Your email address will not be published. Required fields are marked with *.