Message
Message component is used to display inline messages.
Import #
import { MessageModule } from 'primeng/message';
Basic #
Message component requires a content to display.
<p-message>Message Content</p-message>
Icon #
The severity option specifies the type of the message.
<p-message severity="info" icon="pi pi-send">Info Message</p-message>
<p-message severity="success">
<ng-template pTemplate="icon">
<p-avatar image="/images/avatar/amyelsner.png" shape="circle" />
</ng-template>
<span class="ml-2">How may I help you?</span>
</p-message>
Form #
Validation errors in a form are displayed with the error severity.
<div class="flex flex-wrap mb-4 gap-2">
<input pInputText placeholder="Username" aria-label="username" class="ng-invalid ng-dirty" />
<p-message severity="error">Username is required</p-message>
</div>
<div class="flex flex-wrap gap-2">
<input pInputText placeholder="Email" aria-label="email" class="ng-invalid ng-dirty" />
<p-message severity="error" icon="pi pi-times-circle" />
</div>
Dynamic #
Multiple messages can be displayed using the standard for block.
<div class="flex gap-2">
<p-button label="Show" (onClick)="addMessages()" />
<p-button label="Clear" severity="secondary" (onClick)="clearMessages()" />
</div>
<div class="flex flex-col">
@for (message of messages(); track message; let first = $first) {
<p-message [severity]="message.severity" [text]="message.content" [ngClass]="{ 'mt-4': !first }"></p-message>
}
</div>
Closable #
Enable closable option to display an icon to remove a message.
<p-message closable>Closable Message</p-message>
Life #
Messages can disappear automatically by defined the life in milliseconds.
<p-message [life]="3000" severity="success">Auto disappear message</p-message>
Accessibility #
Screen Reader
Message component uses alert role that implicitly defines aria-live as "assertive" and aria-atomic as "true". Since any attribute is passed to the root element, attributes like aria-labelledby and aria-label can optionally be used as well.
Close element is a button with an aria-label that refers to the aria.close property of the locale API by default.
Close Button Keyboard Support
| Key | Function |
|---|---|
| enter | Closes the message. |
| space | Closes the message. |