Messages Messages is used to display messages inline.

Import


import {Messages} 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>

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
header string null Header text of the panel.
toggleable boolean false Defines if content of panel can be expanded and collapsed.
toggleDuration any normal Duration of the effect in milliseconds or pre-defined values like "slow","normal" and "fast".
toggleOrientation string vertical Defines orientation of toggle direction, valid values are "vertical" and "horizontal".
collapsed boolean false When specified, displays the panel as collapsed initially.
closable boolean false Defines if panel can be hidden using close option.
closeDuration any normal Duration of the effect in milliseconds or pre-defined values like "slow","normal" and "fast".

Events

Name Parameters Description
onBeforeCollapse event: Toggle event Callback to invoke before content is collapsed.
onAfterCollapse event: Toggle event Callback to invoke after content is collapsed.
onBeforeExpand event: Toggle event Callback to invoke before content is expanded.
onAfterExpand event: Toggle event Callback to invoke after content is expanded.
onBeforeClose event: Toggle event Callback to invoke before panel is closed.
onAfterClose event: Toggle event Callback to invoke after panel is closed.

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-close Close icon.
ui-messages-icon Severity icon.
ui-messages-summary Summary of a message.
ui-messages-detail Detail of a message.

Dependencies

Native component that requires css of PrimeUI Messages.


<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 = [];
    }
}