Skip to main content
The MagaryToastService provides a programmatic way to display toast notifications. It manages toast state using Angular signals and supports different types, auto-dismissal, and sticky toasts.

​
Injection

import { Component, inject } from '@angular/core';
import { MagaryToastService } from 'ng-magary';

@Component({
  selector: 'app-example',
  template: `
    <button (click)="showSuccess()">Show Success</button>
  `
})
export class ExampleComponent {
  toastService = inject(MagaryToastService);

  showSuccess() {
    this.toastService.add({
      type: 'success',
      title: 'Success',
      message: 'Operation completed successfully!'
    });
  }
}

​
Properties

​
toasts

A readonly signal containing the current array of active toasts. 
readonly toasts: Signal<Toast[]>
Example: 
const activeToasts = this.toastService.toasts();
console.log('Active toasts:', activeToasts.length);

​
Methods

​
add()

Adds a new toast notification to the queue.
​
toast
Toast
required
The toast configuration object
​
toast.id
string
Unique identifier for the toast. If not provided, one will be generated automatically
​
toast.type
'success' | 'info' | 'warning' | 'error'
The type of toast notification. Determines the visual style
​
toast.title
string
The title of the toast notification
​
toast.message
string
The message content of the toast
​
toast.icon
string
Custom icon to display in the toast
​
toast.duration
number
How long the toast should be displayed in milliseconds. Default: 3000
​
toast.life
number
Alias for duration. How long the toast should be displayed in milliseconds
​
toast.sticky
boolean
If true, the toast will not auto-dismiss and must be manually closed. Default: false
​
toast.data
unknown
Additional custom data to attach to the toast
Returns: void Example: 
this.toastService.add({
  type: 'success',
  title: 'Success',
  message: 'Your changes have been saved',
  duration: 5000
});

​
remove()

Removes a specific toast by its ID.
​
id
string
required
The ID of the toast to remove
Returns: void Example: 
const toastId = 'my-custom-toast';
this.toastService.remove(toastId);

​
clear()

Removes all active toasts. Parameters: None Returns: void Example: 
this.toastService.clear();

​
Usage Examples

import { Component, inject } from '@angular/core';
import { MagaryToastService } from 'ng-magary';

@Component({
  selector: 'app-user-form',
  template: `...`
})
export class UserFormComponent {
  toastService = inject(MagaryToastService);

  saveUser() {
    // Save user logic...
    
    this.toastService.add({
      type: 'success',
      title: 'User Saved',
      message: 'User profile has been updated successfully'
    });
  }
}

​
Toast Display

To display toasts in your application, you need to include the mag-toast component in your template: 
<mag-toast></mag-toast>
Typically, this is added to your root component (e.g., app.component.html) so toasts can be displayed from anywhere in your application.

​
Type Definitions

export interface Toast {
  id?: string;
  type?: 'success' | 'info' | 'warning' | 'error';
  title?: string;
  message?: string;
  icon?: string;
  duration?: number;
  life?: number; // alias for duration
  sticky?: boolean;
  data?: unknown;
}

​
Behavior

​
Auto-Dismissal

By default, toasts auto-dismiss after 3000ms (3 seconds). You can customize this using the duration or life property.

​
Sticky Toasts

Toasts with sticky: true will not auto-dismiss and must be manually closed by the user or programmatically removed using the remove() or clear() methods.

​
Toast Queuing

Multiple toasts can be displayed simultaneously. New toasts are added to the end of the queue.

Build docs developers (and LLMs) love

Get started for freeTalk to us