angular-toast-queue

A library to show angular material snackbar as multiple

Live example

Getting started

Step 1: Install angular material:

NPM

ng add @angular/material

Step 2: Install angular-toast-queue:

NPM

npm install angular-toast-queue

Step 3: Import the ToastService in app.ts and set the limitation

app.ts

import { ToastService } from "angular-toast-queue";

export class App {
  private toastService: ToastService = inject(ToastService);
  ngOnInit() {
    this.toastService.setMaxToastVisible(5); // you can change as you want
  }
}

Step 4: call the below function in any component ts where you want to show the snack

• Here all data's are passed to show each snack

import { ToastService } from "angular-toast-queue";
export class yourComponent {
  private toastService: ToastService = inject(ToastService);

  showToast() {
    this.toastService.show({
      message: "This is a toast!",
      position: "top-right",
      duration: 5000,
      backgroundColor: "#FFA500",
      textColor: "#fff",
    });
  }
}

You can configure the common function in service to show the snack with different style and then call in your components

ToastQueueService.ts

import { inject, Injectable } from "@angular/core";
import { ToastService } from "angular-toast-queue";

@Injectable({
  providedIn: "root",
})
export class ToastQueueService {
  private toastService: ToastService = inject(ToastService);
  showTopRightSnack(message: string) {
    this.toastService.show({
      message: message,
      position: "top-right",
      duration: 5000,
      backgroundColor: "#FFA500",
      textColor: "#fff",
    });
  }

  showBottomRightSnack(message: string) {
    this.toastService.show({
      message: message,
      position: "top-right",
      duration: 5000,
      backgroundColor: "#000000",
      textColor: "#fff",
    });
  }
}

import { ToastQueueService } from "../testing";

export class yourComponent {
  private toastQueueService: ToastQueueService = inject(ToastQueueService);

  showToast() {
    this.toastQueueService.showTopRightSnack("This is a toast top!");
  }
}

API

Inputs

| Input | Type | Default | Allowed Values | Required | Description | | --------------- | ------ | --------- | ------------------------------------------------------------------------- | -------- | -------------------------------------------------- | | message | string | | text | yes | message to display | | position | string | top-right | top-left/ top-right/ bottom-left/ bottom-right/ center-top/ center-bottom | no | position to show the toast | | duration | number | 3000 | number | no | visibility of the message. use 0 to close manually | | backgroundColor | string | #323232 | hex codes | no | color to add in background | | textColor | string | #fff | hex codes | no | color to add to text |

Changelogs