Angular Messages

Angular Messages is used to display alerts inline.

Setup

Refer to PrimeNG setup documentation for download and installation steps for your environment.

Import

import {MessagesModule} from 'primeng/messages';
import {MessageModule} from 'primeng/message';

Getting Started

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

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

Message Array

A binding to the value property is required to provide messages to the component.

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

Message Service

MessageService alternative does not require a value binding to an array. 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 application instance itself so that descandant components can have it injected. If there are multiple message 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/api';

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

@Component({
    templateUrl: './messagesdemo.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();
        }
}

Closable

Messages are closable by default resulting in a close icon being displayed on top right corner.

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

In order to disable closable messages, set closable to false. Note that in this case two-way binding is not necessary as the component does not need to update its value.

<p-messages severity="info">
    <ng-template pTemplate>
        <img src="assets/showcase/images/demo/organization/walter.jpg" width="32" />
        <span class="custom-message">I am the one who knocks.</span>
    </ng-template>
</p-messages>

Severities

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

• success
• info
• warn
• error

Static Content

Alternative way to provide the content for the messages is templating. In this case value property and message service is ignored and only static is displayed.

<p-messages severity="info">
    <ng-template pTemplate>
        <img src="assets/showcase/images/primeng.svg" width="32" />
        <div class="p-ml-2">Always bet on Prime.</div>
    </ng-template>
</p-messages>

Message Component

Message component is useful in cases where messages need to be displayed related to an element such as forms. It has two property, severity and text of the message.

<p-message severity="info" text="Message Content"></p-message>
<p-message severity="success" text="Message Content"></p-message>  
<p-message severity="warn" text="Message Content"></p-message>  
<p-message severity="error" text="Message Content"></p-message>

Animation Configuration

Transition of the open and hide animations can be customized using the showTransitionOptions and hideTransitionOptions properties, example below disables the animations altogether.

<p-message [showTransitionOptions]="'0ms'" [hideTransitionOptions]="'0ms'" severity="info" text="PrimeNG Rocks"></p-message>

Theming

Messages supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeNG Messages showcase for demos and documentation.