import {Growl} from 'primeng/primeng';
A single message is specified by Message interface in PrimeNG that defines the severity, summary and detail properties. Messages to display on growl are defined using the value property which should an array of Message instances.
<p-growl [value]="msgs"></p-growl>
import {Message} from 'primeng/primeng';
export class MyModel {
msgs: Message[] = [];
}
Adding messages to the array is enough to display them via growl. Similary removing a message from the array is also removed by growl.
<p-growl [value]="msgs"></p-growl>
<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 = [];
}
Name | Type | Default | Description |
---|---|---|---|
value | array | null | An array of messages to display. |
sticky | boolean | false | When defined, growl messages are not removed automatically after a period defined by life option. |
life | number | 3000 | Time to display a message in milliseconds before removing it. |
Following is the list of structural style classes, for theming classes visit theming page.
Name | Element |
---|---|
ui-growl | Main container element. |
ui-growl-container | Container of a message item. |
ui-growl-item | Message element. |
ui-growl-icon-close | Close icon of a message. |
ui-growl-image | Severity icon. |
ui-growl-message | Container of message texts. |
ui-growl-title | Summary of the message. |
Native component that requires the css of PrimeUI Growl.
<p-growl [value]="msgs" sticky="sticky"></p-growl>
<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>
import {Message} from 'primeng/primeng';
export class GrowlDemo {
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 = [];
}
}