Messages Messages is used to display messages inline.

Import


import {MessagesModule} from 'primeng/primeng';

Getting Started

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


<p-messages [value]="msgs"></p-messages>

Severities

Here are the possible values for the severity of a message.

  • success
  • info
  • warn
  • error

Showing Messages

Adding messages to the array is enough to display them. Similarly removing a message from the array is also removed from the UI.


<p-messages [value]="msgs"></p-messages>

<button type="button" (click)="show()">Show</button>
<button type="button" (click)="clear()">Hide</button>


show() {
    this.msgs.push({severity:'info', summary:'Info Message', detail:'PrimeNG rocks'});
}

hide() {
    this.msgs = [];
}

Closable

Messages are closable by default resulting in a close icon being displayed on top right corner.


<p-messages [value]="msgs"></p-messages>

In order to disable closable messages, set closable to false.


<p-messages [value]="msgs" [closable]="false"></p-messages>

Attributes

Name Type Default Description
value array null An array of messages to display.
closable boolean true Defines if message box can be closed by the click icon.

Styling

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

Name Element
ui-messages Container element.
ui-messages-info Container element when displaying info messages.
ui-messages-warn Container element when displaying warning messages.
ui-messages-error Container element when displaying error messages.
ui-messages-success Container element when displaying success messages.
ui-messages-close Close icon.
ui-messages-icon Severity icon.
ui-messages-summary Summary of a message.
ui-messages-detail Detail of a message.

Dependencies

None.


<p-messages [value]="msgs"></p-messages>

<div>
    <button type="button" pButton (click)="showInfo()" label="Info"></button>
    <button type="button" pButton (click)="showWarn()" label="Warn"></button>
    <button type="button" pButton (click)="showError()" label="Error"></button>
    <button type="button" pButton (click)="showMultiple()" label="Multiple"></button>
    <button type="button" pButton (click)="clear()" icon="fa-close" style="float:right" label="Clear"></button>
</div>


export class MessagesDemo {

    msgs: Message[] = [];

    showInfo() {
        this.msgs = [];
        this.msgs.push({severity:'info', summary:'Info Message', detail:'PrimeNG rocks'});
    }

    showWarn() {
        this.msgs = [];
        this.msgs.push({severity:'warn', summary:'Warn Message', detail:'There are unsaved changes'});
    }

    showError() {
        this.msgs = [];
        this.msgs.push({severity:'error', summary:'Error Message', detail:'Validation failed'});
    }

    showMultiple() {
        this.msgs = [];
        this.msgs.push({severity:'info', summary:'Message 1', detail:'PrimeNG rocks'});
        this.msgs.push({severity:'info', summary:'Message 2', detail:'PrimeUI rocks'});
        this.msgs.push({severity:'info', summary:'Message 3', detail:'PrimeFaces rocks'});
    }

    clear() {
        this.msgs = [];
    }
}