import {MessagesModule} from 'primeng/primeng';
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>
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 = [];
}
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>
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. |
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. |
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 = [];
}
}