Overview
Message component displays inline messages with different severity levels.
Import
import { MagaryMessage } from 'ng-magary';
Basic Usage
<magary-message
[severity]="'success'"
[text]="'Operation completed successfully'">
</magary-message>
Severity Levels
<magary-message
[severity]="'success'"
[text]="'Your changes have been saved'">
</magary-message>
With Detail Text
<magary-message
[severity]="'info'"
[text]="'New Version Available'"
[detail]="'Version 2.0 includes new features and bug fixes'">
</magary-message>
Closable Message
<magary-message
[severity]="'warn'"
[text]="'Important Notice'"
[detail]="'Please read the terms and conditions'"
[closable]="true"
(onClose)="handleClose($event)">
</magary-message>
Auto-Dismiss
<magary-message
[severity]="'success'"
[text]="'File uploaded'"
[life]="3000">
</magary-message>
Custom Icon
<magary-message
[severity]="'info'"
[text]="'Custom Icon Message'"
[icon]="'bell'">
</magary-message>
Conditional Display
<magary-message
*ngIf="showMessage"
[severity]="'success'"
[text]="'Form submitted successfully'">
</magary-message>
<form (ngSubmit)="onSubmit()">
<!-- form fields -->
<button type="submit">Submit</button>
</form>
severity
'success' | 'info' | 'warn' | 'error' | 'secondary' | 'contrast'
default:"'info'"
Severity level of the message
Custom icon (Lucide icon name)
Auto-dismiss duration in milliseconds
Output Events
Callback when message is closed
Complete Example
<div class="messages-container">
<magary-message
*ngFor="let msg of messages"
[severity]="msg.severity"
[text]="msg.text"
[detail]="msg.detail"
[closable]="true"
(onClose)="removeMessage(msg)">
</magary-message>
</div>
<button (click)="addSuccess()">Add Success</button>
<button (click)="addError()">Add Error</button>
Features
- Multiple severities: 6 severity levels
- Closable: Optional close button
- Auto-dismiss: Configurable timeout
- Custom icons: Override default icons
- Animations: Smooth enter/exit
- Detailed text: Summary and detail support
- Inline display: Shows within page flow
Accessibility
- ARIA role=“alert” for important messages
- Semantic severity colors
- Keyboard accessible close button
- Screen reader support
