Toasts Reference

Here are all the existing types of toast notifications.

2024-12-21
2 min read
rperezll

The different types of toast notifications available are provided by the NgFastToastService, which exports the necessary methods for their usage.

import { NgFastToastService } from "ng-fast-toast";

fastToast = inject(NgFastToastService);

Success

The warning toast indicates a potential issue or caution within our system.

this.fastToast.success({
  title: "Perfect!",
  content: "Good Job today.",
  duration: 5,
});

It takes a Notification object as a parameter and returns void.

Warning

The warning toast indicates a potential issue or caution within our system.

this.fastToast.warn({
  title: "Listen!",
  content: "You are about to do something that could be dangerous.",
  duration: 5,
});

It takes a Notification object as a parameter and returns void.

Error

The error toast represents a failure or an issue within our system.

this.fastToast.error({
  title: "Ooh no!",
  content: "Something went wrong. Please try again later.",
  duration: 5,
});

It takes a Notification object as a parameter and returns void.

Loading

The loading toast is used when invoking an asynchronous process, displaying a loading notification, and then updating it based on whether the process succeeds or fails.

const guid = await this.fastToast.loading({
  title: "Waiting for...",
  content: "I am processing...",
  duration: 50000,
});

// Do something async...

this.fastToast.updateLoading(guid, "error", {
  title: "Completed!",
  content: "The process has finished.",
  duration: 5,
});

The loading toast returns a promise with a guid, which can be used to update the toast using the updateLoading method.

The updateLoading method takes the guid from the promise response, a newType of type NotificationType, and a notification of type Notification.