Growl Growl is used to display messages in an overlay. Growl is deprecated, use Toast instead.

Basic

Message Service

Import


import {GrowlModule} from 'primeng/growl';

Getting Started

A single message is specified by the Message interface in PrimeNG that defines the id, severity, summary and detail as properties. Messages to display on growl can either be defined using the value property which should be an array of Message instances or using a MessageService.


<p-growl [(value)]="msgs"></p-growl>


import {Message} from 'primeng/api';

export class MyModel {

    msgs: Message[] = [];

}

Message Service

MessageService allows having one growl in the entire application instead of having separate ones in each component that uses it. In order to use this service, import the class and define it as a provider in a component higher up in the component tree such as the application instance itself so that descandant components can have it injected. If there are multiple growl components having the same message service, you may use key property of the component to match the key of the message to implement scoping.


import {MessageService} from 'primeng/components/common/messageservice';


import {Component} from '@angular/core';
import {Message} from 'primeng/components/common/api';
import {MessageService} from 'primeng/components/common/messageservice';

@Component({
    templateUrl: './growldemo.html'
})
export class MessageServiceDemo {
    
    constructor(private messageService: MessageService) {}
    
    addSingle() {
        this.messageService.add({severity:'success', summary:'Service Message', detail:'Via MessageService'});
    }
    
    addMultiple() {
        this.messageService.addAll([{severity:'success', summary:'Service Message', detail:'Via MessageService'},
                                    {severity:'info', summary:'Info Message', detail:'Via MessageService'}]);
    }
    
    clear() {
        this.messageService.clear();
    }
}

Change Detection

In case messages are provided via the value property instead of service, growl either uses setter based checking or ngDoCheck to realize if the messages has changed to update the UI. This is configured using the immutable property, when enabled (default) setter based detection is utilized so your changes such as adding or removing a record should always create a new array reference instead of manipulating an existing array as Angular does not trigger setters if the reference does not change. For example, use slice instead of splice when removing an item or use spread operator instead of push method when adding an item. On the other hand, setting immutable property to false removes this restriction by using ngDoCheck with IterableDiffers to listen changes without the need to create a new reference of data. Setter based method is faster however both methods can be used depending on your preference. Note that immutable property also defines how Growl treats the value, for example when immutable is enabled removing a message does not mutate the original value but creates a new array.

Severities

Here are the possible values for the severity of a message.

  • success
  • info
  • warn
  • error

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()">Clear</button>


show() {
    this.msgs.push({severity:'info', summary:'Info Message', detail:'PrimeNG rocks'});
}

clear() {
    this.msgs = [];
}

Properties

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.
style string null Inline style of the component.
styleClass string null Style class of the component.
immutable boolean true Defines how the messages data should be manipulated.
baseZIndex number 0 Base zIndex value to use in layering.
autoZIndex boolean true Whether to automatically manage layering.
key string null Id to match the key of the message to enable scoping in service based messaging.

Events

Name Parameters Description
onClose message: Removed message Callback to invoke when a message is closed.
onClick message: Clicked message Callback to invoke when a message is clicked.
onHover message: Hovered message Callback to invoke when mouse enters a message.

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

None.

View on GitHub

<p-growl [(value)]="msgs"></p-growl>

<h3 class="first">Basic</h3>
<div>
    <button type="button" pButton (click)="showSuccess()" label="Success" class="ui-button-success"></button>
    <button type="button" pButton (click)="showInfo()" label="Info" class="ui-button-info"></button>
    <button type="button" pButton (click)="showWarn()" label="Warn" class="ui-button-warning"></button>
    <button type="button" pButton (click)="showError()" label="Error" class="ui-button-danger"></button>
    <button type="button" pButton (click)="showMultiple()" label="Multiple"></button>
    <button type="button" pButton (click)="clear()" icon="pi pi-times" style="float:right" label="Clear"></button>
</div>

<h3>Message Service</h3>
<button type="button" pButton (click)="showViaService()" label="Add with Service"></button>
<button type="button" pButton (click)="clearViaService()" label="Clear with Service"></button>


import {Component} from '@angular/core';
import {SelectItem} from 'primeng/components/common/api';
import {Message} from 'primeng/components/common/api';
import {MessageService} from 'primeng/components/common/messageservice';

@Component({
    templateUrl: './growldemo.html',
    providers: [MessageService]
})
export class GrowlDemo {

    msgs: Message[] = [];
    
    constructor(private messageService: MessageService) {}

    showSuccess() {
        this.msgs = [];
        this.msgs.push({severity:'success', summary:'Success Message', detail:'Order submitted'});
    }

    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'});
    }
    
    showViaService() {
        this.messageService.add({severity:'success', summary:'Service Message', detail:'Via MessageService'});
    }
    
    clearViaService() {
        this.messageService.clear();
    }

    clear() {
        this.msgs = [];
    }
}