The Toast component displays brief, auto-dismissing notification messages to provide feedback about operations or system events.
Basic usage
import { ToastService } from '@flowx/angular-ui-toolkit';
export class MyComponent {
constructor(private toast: ToastService) {}
showToast() {
this.toast.show('Operation successful!');
}
}
Toast service methods
show
(message: string, options?: ToastOptions) => void
Shows a default toast notification
success
(message: string, options?: ToastOptions) => void
Shows a success toast with checkmark icon
error
(message: string, options?: ToastOptions) => void
Shows an error toast with error icon
warning
(message: string, options?: ToastOptions) => void
Shows a warning toast with warning icon
info
(message: string, options?: ToastOptions) => void
Shows an info toast with info icon
Toast options
interface ToastOptions {
duration?: number; // Auto-dismiss duration (ms), default: 3000
position?: 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center';
dismissible?: boolean; // Show close button, default: true
icon?: string; // Custom icon
action?: ToastAction; // Action button
}
interface ToastAction {
label: string;
onClick: () => void;
}
Examples
Basic toasts
Custom duration
Positions
With actions
Form submission
File upload
Network status
export class ToastExamples {
constructor(private toast: ToastService) {}
showDefault() {
this.toast.show('This is a notification');
}
showSuccess() {
this.toast.success('Changes saved successfully!');
}
showError() {
this.toast.error('Failed to save changes');
}
showWarning() {
this.toast.warning('Your session will expire soon');
}
showInfo() {
this.toast.info('New version available');
}
}
export class CustomDuration {
constructor(private toast: ToastService) {}
showShortToast() {
this.toast.show('Quick message', {
duration: 1000 // 1 second
});
}
showLongToast() {
this.toast.show('Important message', {
duration: 10000 // 10 seconds
});
}
showPersistentToast() {
this.toast.show('Manual dismiss required', {
duration: 0 // Won't auto-dismiss
});
}
}
export class ToastPositions {
constructor(private toast: ToastService) {}
showTopRight() {
this.toast.success('Top right position', {
position: 'top-right'
});
}
showTopCenter() {
this.toast.info('Top center position', {
position: 'top-center'
});
}
showBottomLeft() {
this.toast.warning('Bottom left position', {
position: 'bottom-left'
});
}
}
export class ToastWithActions {
constructor(
private toast: ToastService,
private router: Router
) {}
showWithAction() {
this.toast.info('You have a new message', {
action: {
label: 'View',
onClick: () => this.router.navigate(['/messages'])
}
});
}
showUndoAction() {
const item = { id: 1, name: 'Item' };
this.toast.warning(`${item.name} deleted`, {
duration: 5000,
action: {
label: 'Undo',
onClick: () => this.undoDelete(item)
}
});
this.deleteItem(item);
}
deleteItem(item: any) {
// Delete logic
}
undoDelete(item: any) {
// Restore logic
}
}
export class FormSubmission {
constructor(private toast: ToastService) {}
async onSubmit(formData: any) {
try {
await this.api.submitForm(formData);
this.toast.success('Form submitted successfully!');
} catch (error) {
this.toast.error('Failed to submit form. Please try again.');
}
}
}
export class FileUploadToasts {
constructor(private toast: ToastService) {}
async uploadFiles(files: File[]) {
for (const file of files) {
try {
await this.uploadFile(file);
this.toast.success(`${file.name} uploaded successfully`);
} catch (error) {
this.toast.error(`Failed to upload ${file.name}`, {
duration: 5000,
action: {
label: 'Retry',
onClick: () => this.uploadFile(file)
}
});
}
}
}
async uploadFile(file: File) {
// Upload implementation
}
}
export class NetworkToasts implements OnInit {
constructor(private toast: ToastService) {}
ngOnInit() {
window.addEventListener('online', () => {
this.toast.success('Connection restored');
});
window.addEventListener('offline', () => {
this.toast.warning('No internet connection', {
duration: 0,
dismissible: false
});
});
}
}
Setup
Add the ToastContainer component to your app root:
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<router-outlet></router-outlet>
<flx-toast-container></flx-toast-container>
`
})
export class AppComponent {}
Styling
flx-toast {
--flx-toast-min-width: 300px;
--flx-toast-max-width: 500px;
--flx-toast-padding: 16px;
--flx-toast-border-radius: 8px;
--flx-toast-background: #ffffff;
--flx-toast-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
--flx-toast-success-color: #10b981;
--flx-toast-error-color: #ef4444;
--flx-toast-warning-color: #f59e0b;
--flx-toast-info-color: #3b82f6;
--flx-toast-animation-duration: 300ms;
}
Toast positions
Visualization of toast positions:
┌─────────────────────────────────┐
│ top-left top-center top-right│
│ │
│ │
│ Page Content │
│ │
│ │
│bottom-left bottom-center bottom-│
│ right │
└─────────────────────────────────┘
Accessibility
The Toast component ensures accessibility:
role="status" for notifications
role="alert" for error toasts
aria-live="polite" for standard toasts
aria-live="assertive" for error toasts
- Screen reader announcements
- Keyboard accessible close button (Escape key)
- Focus management for action buttons
Best practices
- Use success toasts for completed actions
- Use error toasts for failed operations
- Use warning toasts for important notices
- Use info toasts for neutral notifications
- Keep messages concise (one sentence)
- Set appropriate durations (3-5 seconds typical)
- Provide actions for recoverable errors
- Don’t show multiple toasts for the same event
- Stack toasts vertically for multiple notifications
- Use consistent positioning throughout your app
For critical errors that require user action, consider using a Modal instead of a toast.
Avoid using toasts for critical information that users must read. Toasts auto-dismiss and can be missed.
Common use cases
- Form submission confirmation
- File upload/download status
- Save/delete confirmation
- Error notifications
- Network status changes
- Copy to clipboard confirmation
- Background task completion
- Session warnings
- New content availability
- Message - For persistent messages in content
- Modal - For critical notifications requiring action