Angular 17 Toast Notification Message Example

To show toaster notification message in Angular 17 app; Just open your cmd or terminal and navigate to angular project directory and install toaster notification module using abc command, after that, initialize toaster messages in TypeScript file, and then use it with HTML views to show toaster/toast messages on Angular web applications.

How to Use toast/toaster Notification in Angular 17

Steps to install and use toast/toaster to show messages or notifications in angular projects:

Step 1 – Create New Angular App

First of all, open your command prompt or cmd to install & setup angular new project in system by executing the following command on command prompt or cmd:

ng new myApp --no-standalone
cd myApp

Step 2 – Install ngx-toastr Module

Run npm install ngx-toastr --save on cmd or terminal window to install ngx-toaster module into your angular application:

npm install ngx-toastr --save

Step 3 – Import ToastrModule in Module.ts

Once you have installed toaster module, you need to import toaster module in app.module.ts file; like following:

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

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ToastrModule.forRoot(),
  ],
  bootstrap: [AppComponent],
})
export class AppModule { }

Step 4 – Create toaster Notification Service

To create a new service to manage toaster messages; simply run the ng generate service toaster command on cmd or terminal window:

ng generate service toaster

Next, create toaster notification services like the following in toaster.service.ts:

import { Injectable } from '@angular/core';
import { ToastrService } from 'ngx-toastr';

@Injectable({
  providedIn: 'root',
})
export class ToasterService {

  constructor(private toastr: ToastrService) { }

  success(message: string, title?: string) {
    this.toastr.success(message, title);
  }

  error(message: string, title?: string) {
    this.toastr.error(message, title);
  }

  warning(message: string, title?: string) {
    this.toastr.warning(message, title);
  }

  info(message: string, title?: string) {
    this.toastr.info(message, title);
  }

}

Step 5 – Create Button For Toaster Notification

To create toaster notification button in view; Simply open app.component.html and create it like following:

<h1>Angular 17 Toaster Examples - Tutsmake.com</h1>

<button (click)="showToaster()" class="btn btn-primary">Show Toaster</button>
<button (click)="showError()">Show Error</button>
<button (click)="showInfo()">Show Info</button>
<button (click)="showWarning()">Show Warning</button>

Step 6 – Implement Toaster Notification Function in typescript File

To implement toaster notification functions in the app.component.ts file; like following:

import { Component } from '@angular/core';
import { ToasterService } from './toaster.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  constructor(private toasterService: ToasterService) { }

  showToaster() {
    this.toasterService.success('This is a success message!', 'Success');
  }  

  showError() {
    this.toasterService.success('Something Went to Wrong', 'Error');
  }

  showInfo() {
    this.toasterService.success('This is an info message', 'Info');
  }

  showWarning() {
    this.toasterService.success('Warning message', 'Warning');
  }
}

Step 7 – Start the Angular App

Run ng server command on cmd or terminal to start angular app:

ng serve

Conclusion

That’s it! You have successfully learned how to use toaster notification in Angular application using the ngx-toastr module.

Recommended Angular Tutorials