Angular 7 Toastr Notifications Working Example

·

,
angular7

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 7 Toastr Notifications Working Example.

Toastr Notifications are the well designed  popup message and easy to use and implement. Today I am implementing Toastr Notifications in Angular 7. I am very happy for Angular 7.

I am showing toastr notifications in Angular 7 button click event. We can use this in many ways.

Here is the working picture of Toastr Notifications in Angular 7 Application:

 

Angular 7 Toastr Notifications Working Example

 

success_notification

 

error_notification

Here are the working steps you need to follow:

 

1. Here are the few commands to install Angular 7:

npm install -g @angular/cli 
ng new angulartoastr //Create new Angular Project
$ cd angulartoastr // Go inside the Angular Project Folder
ng serve --open // Run and Open the Angular Project
http://localhost:4200/ // Working Angular Project Url

2. After done with above commands, you need to below command to install toastr into your application:

npm install ngx-toastr --save
npm install @angular/animations --save

3. After all ablove, you need to add below into src/styles.css:

// regular style toast 
@import '~ngx-toastr/toastr.css';

4. Now, add below code into your app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToastrModule } from 'ngx-toastr';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule, // required animations module
    ToastrModule.forRoot() // ToastrModule added
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

5. Now add below code into your app.component.ts file:

 

import { Component } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angulartoastr';
  constructor(private toastr: ToastrService) {}
  showSuccess() {
    this.toastr.success('Hello world!', 'Toastr fun!',
    {timeOut: 2000});;
  }
  showError() {
  this.toastr.error('everything is broken', 'Major Error', {
  timeOut: 3000
});
}
}

5. Now, finally add below code into app.component.html file:

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Angular Toastr:
  </h1>
</div>
<button (click) = "showSuccess()">Oprn Angular Toastr Success</button>
<br/><br/>
<button (click) = "showError()">Oprn Angular Toastr Error</button>

Now, you done, if you have any query related to this post, then please do comment below or ask questions.

Thank you,

Jatt

TheRichPost

Comments

7 responses to “Angular 7 Toastr Notifications Working Example”

  1. latha Avatar
    latha

    Hi..I tried this in both Angular 6 & 7..But it is not working…When i try to install ngx-toastr, it shows error:

    “npm WARN ngx-toastr@9.1.1 requires a peer of @angular/core@^6.0.0 || ^7.0.0 but none is installed. You must install peer dependencies yourself.

    npm WARN ngx-toastr@9.1.1 requires a peer of @angular/common@^6.0.0 || ^7.0.0 but none is installed. You must install peer dependencies yourself.

    npm WARN ngx-toastr@9.1.1 requires a peer of @angular/platform-browser@^6.0.0 || ^7.0.0 but none is installed. You must install peer dependencies yourself.

    npm WARN ngx-toastr@9.1.1 requires a peer of rxjs@^6.1.0 but none is installed. You must install peer dependencies yourself.”

    If i try to run a project i got error like:
    “Uncaught (in promise): Error: inject() must be called from an injection context inject ToastrService_Factory”

  2. Ajay Malhotra Avatar

    Did you follow the complete above tutorial?

  3. Chula Avatar
    Chula

    Thanks for your post. But I have a problem with when clicking the close button. If I click “x” the toast notification is not closed. Please explain how to do it?

    constructor(private toastr: ToastrService) { }

    this.toastr.info(“Toaster notification”, “”, {
    timeOut: 5000,
    closeButton: true
    });

  4. Ajay Malhotra Avatar

    Okay sure, I will update the code.

  5. Ajay Malhotra Avatar
    Ajay Malhotra

    toastr.success(‘What a nice button’, ‘Button spree’, {
    closeButton: true
    });

  6. Julien Pitt Avatar
    Julien Pitt

    Thank you for this post.

  7. Ajay malhotra Avatar
    Ajay malhotra

    “node_modules/ngx-toastr/toastr.css”

    Include above in angular.json file styles