Building a Custom Notification Toast Service in Angular

by

Creating a custom notification toast service in Angular allows developers to provide users with real-time feedback and updates seamlessly. Toast notifications are small, unobtrusive messages that appear temporarily on the screen, often used for success messages, warnings, or errors.

Why Build a Custom Toast Service?

While Angular offers various third-party libraries for toast notifications, building a custom service provides greater control over the appearance, behavior, and integration within your application. It also helps reduce dependencies and tailor notifications to your specific needs.

Implementing the Toast Service

To start, create a new service in Angular using the Angular CLI:

ng generate service toast

Creating the Toast Service

Edit the generated toast.service.ts to manage toast messages:

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

export interface ToastMessage {
  id: number;
  message: string;
  type: 'success' | 'error' | 'info';
}

@Injectable({
  providedIn: 'root'
})
export class ToastService {
  private toastSubject = new Subject();
  toastState$ = this.toastSubject.asObservable();
  private idCounter = 0;

  showToast(message: string, type: 'success' | 'error' | 'info' = 'info') {
    const toast: ToastMessage = {
      id: ++this.idCounter,
      message,
      type
    };
    this.toastSubject.next(toast);
  }
}

Creating the Toast Component

Generate a toast component to display messages:

ng generate component toast

Update toast.component.ts to subscribe to the toast service:

import { Component, OnInit } from '@angular/core';
import { ToastService, ToastMessage } from '../toast.service';

@Component({
  selector: 'app-toast',
  templateUrl: './toast.component.html',
  styleUrls: ['./toast.component.css']
})
export class ToastComponent implements OnInit {
  toasts: ToastMessage[] = [];

  constructor(private toastService: ToastService) {}

  ngOnInit() {
    this.toastService.toastState$.subscribe(toast => {
      this.toasts.push(toast);
      setTimeout(() => this.removeToast(toast.id), 3000);
    });
  }

  removeToast(id: number) {
    this.toasts = this.toasts.filter(toast => toast.id !== id);
  }
}

Design the toast appearance in toast.component.html:

<div class="toast-container">
  <div *ngFor="let toast of toasts" [ngClass]="toast.type" class="toast">
    {{ toast.message }}
  </div>
</div>

Using the Toast Service

Inject the ToastService into any component where you want to trigger notifications:

import { Component } from '@angular/core';
import { ToastService } from '../toast.service';

@Component({
  selector: 'app-example',
  template: '<button (click)="notify()">Show Toast</button>'
})
export class ExampleComponent {
  constructor(private toastService: ToastService) {}

  notify() {
    this.toastService.showToast('This is a custom toast message!', 'success');
  }
}

Ensure the <app-toast> component is included in your main template, typically in app.component.html:

<app-toast></app-toast>

Now, clicking the button will display a styled toast notification, providing users with immediate feedback.