Growl Messages is used to display messages in an overlay.

Import


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

}

Showing Messages

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

Attributes

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.

Styling

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.

Dependencies

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