toaster

Toast Notifications

Click a button to preview toast message

1️⃣ Application-Level Toaster Configuration

ts
import { Component } from '@angular/core';
import { RouterOutlet } from "@angular/router";
import { toaster } from "universe-code/uiux";

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [],
  templateUrl: './app.html',
})

export class AppComponent {

  constructor() {
    toaster.configure({
      position: "top-right",
      maxToasts: 7,
      duration: 5000,
    });
  }
}


🚀 Using Toasts in Components

Import toaster:

ts
import { toaster } from "universe-code/uiux";

🟢 Success Toast

ts
toaster.success({
  title: "Success",
  description: "Success toast.",
});

🔴 Error Toast

ts
toaster.error({
  title: "Error",
  description: "Error toast.",
});

🔵 Info Toast

ts
toaster.info({
  title: "Info",
  description: "Information message.",
});

🟡 Warning Toast

ts
toaster.warning({
  title: "Warning",
  description: "Warning message.",
});

🧩 Dynamic Status Toast

ts
toaster({
  status: "success",
  title: "Success",
  description: "Operation completed successfully.",
});

Available status values:

  • success
  • error
  • info
  • warning

⏱ Custom Duration Toast:

Import helper:

ts
import { minutesToMs } from "universe-code/core";

Example:

ts
toaster({
  status: "error",
  title: "Login Failed",
  description: "User not found",
  duration: minutesToMs(5),
});

minutesToMs() converts minutes to milliseconds.


📚 API Reference

toaster.configure(options)

OptionTypeDefaultDescription
position"top-right" "top-left" "bottom-right" "bottom-left"top-rightToast screen position
maxToastsnumber7Max toasts displayed
durationnumber4000Auto‑close time in ms

Toast Methods

MethodDescription
toaster.success(options)Show success toast
toaster.error(options)Show error toast
toaster.info(options)Show info toast
toaster.warning(options)Show warning toast
toaster(options)Dynamic status toast

Toast Options

PropertyTypeRequired
titlestring
descriptionstring
status"success" "error" "info" "warning"❌ (only for dynamic call)
durationnumber