import {Messages} 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 . Similary 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, a close icon is displayed on top right corner. If you use two-way binding, clicking this icon also clears the messages array at your component.
<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 |
---|---|---|---|
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". |
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. |
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. |
PrimeUI messages widget css.
<p-messages [(value)]="msgs"></p-messages> <div> <button type="button" pButton (click)="showInfo()">Info</button> <button type="button" pButton (click)="showWarn()">Warn</button> <button type="button" pButton (click)="showError()">Error</button> <button type="button" pButton (click)="showMultiple()">Multiple</button> <button type="button" pButton (click)="clear()" icon="fa-close" style="float:right">Clear</button> </div>
export class MessagesDemoComponent { 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 = []; } }