Messages

Messages is used to display alerts inline.

Import #


import { MessagesModule } from 'primeng/messages';

Basic #

A single message is specified by Message interface in PrimeNG that defines the id, severity, summary and detail as the properties. Messages to display can either be defined using the value property which should an array of Message instances or using a MessageService are defined using the value property which should an array of Message instances. 


<p-messages [(value)]="messages" [enableService]="false" [closable]="false"></p-messages>

Closable #

Messages are closable by default resulting in a close icon being displayed on top right corner. In order to disable closable messages, set closable to false. Note that in this case two-way binding is not necessary as the component does not need to update its value. 


<p-messages [(value)]="messages1" [enableService]="false" [closable]="false"></p-messages>
<p-messages [(value)]="messages2" [enableService]="false"></p-messages>

Dynamic #

A binding to the value property is required to provide messages to the component.


<button type="button" pButton pRipple (click)="addMessages()" label="Show" class="mr-2"></button>
<button type="button" pButton pRipple (click)="clearMessages()" icon="pi pi-times" label="Clear" class="p-button-secondary"></button>
<p-messages [(value)]="messages" [enableService]="false" [closable]="false"></p-messages>

Message Service #

MessageService alternative does not require a value binding to an array. In order to use this service, import the class and define it as a provider in a component higher up in the component tree such as application instance itself so that descandant components can have it injected. If there are multiple message components having the same message service, you may use key property of the component to match the key of the message to implement scoping. 


<div class="flex justify-content-center gap-2">
    <button type="button" pButton class="p-button-primary" (click)="addSingle()" label="Single"></button>
    <button type="button" pButton class="p-button-success" (click)="addMultiple()" label="Multiple"></button>
    <button type="button" pButton class="p-button-secondary" (click)="clear()" label="Clear"></button>
</div>
<p-messages></p-messages>

Static Content #

Alternative way to provide the content for the messages is templating. In this case value property and message service is ignored and only static is displayed.


<p-messages severity="info">
    <ng-template pTemplate>
        <img src="https://primefaces.org/cdn/primeng/images/primeng.svg" width="32" />
        <div class="ml-2">Always bet on Prime.</div>
    </ng-template>
</p-messages>

Inline #

p-message component is used to display inline messages mostly within forms.

Message Content
Message Content
Message Content
Message Content
Field is required
Username is not available.

<div class="flex justify-content-center gap-2">
    <p-message severity="info" text="Message Content"></p-message>
    <p-message severity="success" text="Message Content"></p-message>  
    <p-message severity="warn" text="Message Content"></p-message>  
    <p-message severity="error" text="Message Content"></p-message>
</div>

<div class="mt-4">
    <input type="text" pInputText placeholder="Username" class="ng-dirty ng-invalid mr-2">
    <p-message severity="error" text="Field is required"></p-message>
</div>

<div class="mt-4">
    <input type="text" pInputText placeholder="Email" class="ng-dirty ng-invalid mr-2">
    <p-message severity="error"></p-message>
</div>

<div class="field p-fluid mt-4">
    <label for="username">Username</label>
    <input id="username" type="username" aria-describedby="username-help" class="ng-invalid ng-dirty" pInputText />
    <small id="username-help" class="p-error">Username is not available.</small>
</div>

Severity #

The severity option specifies the type of the message.


<p-messages [(value)]="messages" [enableService]="false" [closable]="false"></p-messages>

Animation #

Transition of the open and hide animations can be customized using the showTransitionOptions and hideTransitionOptions properties, example below disables the animations altogether.


<p-messages [(value)]="messages" [showTransitionOptions]="'500ms'" [hideTransitionOptions]="'500ms'" [enableService]="false"></p-messages>

Styling for Messages #

Following is the list of structural style classes, for theming classes visit theming page.

NameElement
p-messagesContainer element.
p-messageMessage element.
p-message-infoMessage element when displaying info messages.
p-message-warnMessage element when displaying warning messages.
p-message-errorMessage element when displaying error messages.
p-message-successMessage element when displaying success messages.
p-message-closeClose button.
p-message-close-iconClose icon.
p-message-iconSeverity icon.
p-message-summarySummary of a message.
p-message-detailDetail of a message.

Styling for Message #

Following is the list of structural style classes, for theming classes visit theming page.

NameElement
p-inline-messageMessage element.
p-inline-message-infoMessage element when displaying info messages.
p-inline-message-warnMessage element when displaying warning messages.
p-inline-message-errorMessage element when displaying error messages.
p-inline-message-successMessage element when displaying success messages.
p-inline-message-iconSeverity icon.
p-inline-message-textText of a message.

Accessibility #

Screen Reader

Message components use 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

KeyFunction
enterCloses the message.
spaceCloses the message.
PrimeNG 17.14.1 by PrimeTek