Angular Toaster Notifications Massage

Step 1: Create New App

  • Using the command below, you can simply create your own Angular app:
ng new my-new-app

Step 2: Install Toastr

  • We will set up the @angular/animations and ngx-toastr npm packages in this phase. Let’s execute both commands as shown below:
npm install ngx-toastr --save
npm install @angular/animations --save
  • Now that we need to include the toastr CSS, let’s add it to the angular.json file as “node modules/ngx-toastr/toastr.css”.
  1. angular.json
.....
    "styles": [
      "node_modules/ngx-toastr/toastr.css",
      "src/styles.css"
    ],
.....

Step 3: Import Module

  • ToasterModule and BrowserAnimationsModule must be imported into the app.module.ts file in this phase. Therefore, let’s import it as seen below:
  1. src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
  
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToastrModule } from 'ngx-toastr';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ToastrModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4: Create Service for Notification

  1. The showSuccess(), showError(), showInfo(), and showWarning() methods will be created separately for Toastr in this section so that they may be used in any component.
  2. So let’s enter the code below:

execute the command below:

ng generate service notification
  1. src/app/notification.service.ts
import { Injectable } from '@angular/core';
  
import { ToastrService } from 'ngx-toastr';
  
@Injectable({
  providedIn: 'root'
})
export class NotificationService {
  
  constructor(private toastr: ToastrService) { }
  
  showSuccess(message, title){
      this.toastr.success(message, title)
  }
  
  showError(message, title){
      this.toastr.error(message, title)
  }
  
  showInfo(message, title){
      this.toastr.info(message, title)
  }
  
  showWarning(message, title){
      this.toastr.warning(message, title)
  }
  
}

Step 5: Updated View File

  • We will now update our html file. For alert messages, we’ll design four straightforward buttons.
  • So let’s enter the code below:
  1. src/app/app.component.html
<button (click)="showToasterSuccess()">
    Success Toaster
</button>
  
<button (click)="showToasterError()">
    Error Toaster
</button>
  
<button (click)="showToasterInfo()">
    Info Toaster
</button>
  
<button (click)="showToasterWarning()">
    Warning Toaster
</button>

Step 6: Use Component ts File

  • Our component has to be updated right now. In this file, we’ll use the call alert feature and the notification service. Let’s change as follows:
  1. src/app/app.component.ts
import { Component } from '@angular/core';
  
import { NotificationService } from './notification.service'
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'toaster-not';
  
  constructor(private notifyService : NotificationService) { }
  
  showToasterSuccess(){
      this.notifyService.showSuccess("Data shown successfully !!", "ItSolutionStuff.com")
  }
  
  showToasterError(){
      this.notifyService.showError("Something is wrong", "ItSolutionStuff.com")
  }
  
  showToasterInfo(){
      this.notifyService.showInfo("This is info", "ItSolutionStuff.com")
  }
  
  showToasterWarning(){
      this.notifyService.showWarning("This is warning", "ItSolutionStuff.com")
  }
}
  • Run Angular App:
  1. ng serve
  • Output :

Submit a Comment

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

Subscribe

Select Categories