Skip to main content

​
Overview

Toast component displays temporary notification messages. Works with MagaryToastService to show notifications from anywhere in your application.

​
Import

import { MagaryToast, MagaryToastService } from 'ng-magary';

​
Setup

Add the toast component to your app root template: 
<!-- app.component.html -->
<magary-toast></magary-toast>
<router-outlet></router-outlet>

​
Basic Usage

<button (click)="showSuccess()">Show Success</button>
<button (click)="showInfo()">Show Info</button>
<button (click)="showWarn()">Show Warning</button>
<button (click)="showError()">Show Error</button>

​
Position Options

<magary-toast [position]="'top-right'"></magary-toast>

​
Auto-Dismiss

this.toastService.add({
  severity: 'info',
  summary: 'Auto Close',
  detail: 'This will close in 3 seconds',
  life: 3000 // milliseconds
});

​
Sticky Toast

this.toastService.add({
  severity: 'info',
  summary: 'Sticky',
  detail: 'This will not auto-close',
  sticky: true
});

​
With Custom Content

this.toastService.add({
  severity: 'success',
  summary: 'File Uploaded',
  detail: 'document.pdf has been uploaded successfully',
  icon: 'upload',
  closable: true
});

​
Multiple Toasts

showMultiple() {
  this.toastService.add({
    severity: 'info',
    summary: 'Message 1',
    detail: 'First message'
  });
  
  this.toastService.add({
    severity: 'success',
    summary: 'Message 2',
    detail: 'Second message'
  });
  
  this.toastService.add({
    severity: 'warn',
    summary: 'Message 3',
    detail: 'Third message'
  });
}

​
Clear Toasts

// Clear all toasts
this.toastService.clear();

// Clear specific toast by key
this.toastService.clear('myKey');

​
Input Properties

​
position
'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center' | 'center'
default:"'top-right'"
Position of toast container
​
baseZIndex
number
default:"1100"
Base z-index value
​
offsetX
string
default:"'1rem'"
Horizontal offset from edge
​
offsetY
string
default:"'1rem'"
Vertical offset from edge

​
Toast Message Interface

interface ToastMessage {
  severity?: 'success' | 'info' | 'warn' | 'error';
  summary?: string;
  detail?: string;
  life?: number; // milliseconds
  sticky?: boolean;
  closable?: boolean;
  icon?: string;
  key?: string;
  data?: any;
}

​
Service Methods

​
add(message: ToastMessage)
void
Add a toast message
​
clear(key?: string)
void
Clear toasts (all or by key)
​
remove(id: string)
void
Remove specific toast by ID

​
Features

  • Multiple positions: 7 position options
  • Auto-dismiss: Configurable timeout
  • Sticky mode: Toasts that don’t auto-close
  • Animations: Smooth enter/exit transitions
  • Multiple severities: Success, info, warning, error
  • Custom icons: Use Lucide icons
  • Closable: Optional close button
  • Service-based: Show from anywhere in app

​
Complete Example

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [MagaryToast],
  template: `
    <magary-toast [position]="'top-right'"></magary-toast>
    <router-outlet></router-outlet>
  `
})
export class AppComponent {}

// Use in any component
@Component({...})
export class AnyComponent {
  private toastService = inject(MagaryToastService);
  
  saveData() {
    // Your save logic
    this.toastService.add({
      severity: 'success',
      summary: 'Saved',
      detail: 'Data saved successfully',
      life: 3000
    });
  }
  
  handleError(error: any) {
    this.toastService.add({
      severity: 'error',
      summary: 'Error',
      detail: error.message,
      sticky: true
    });
  }
}

​
Accessibility

  • ARIA live region for announcements
  • Keyboard accessible (Tab, Enter to close)
  • Screen reader support
  • Focus management

Build docs developers (and LLMs) love

Get started for freeTalk to us