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.

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

Events

Styling

Following is the list of structural style classes, for theming classes visit theming page.

Dependencies

None.

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