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)
| Option | Type | Default | Description |
|---|---|---|---|
position | "top-right" "top-left" "bottom-right" "bottom-left" | top-right | Toast screen position |
maxToasts | number | 7 | Max toasts displayed |
duration | number | 4000 | Auto‑close time in ms |
Toast Methods
| Method | Description |
|---|---|
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
| Property | Type | Required |
|---|---|---|
title | string | ✅ |
description | string | ❌ |
status | "success" "error" "info" "warning" | ❌ (only for dynamic call) |
duration | number | ❌ |