MessagesMessages is used to display messages inline.
Documentation
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 [value]="msgs" [closable]="false"></p-messages>
Severities
Here are the possible values for the severity of a message.
- success
- info
- warn
- error
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.
<h3>Inline Message CSS</h3>
<p>CSS helpers to display inline messages mostly within forms.</p>
<p-message severity="info" text="PrimeNG Rocks"></p-message>
<p-message severity="success" text="Record Saved"></p-message>
<p-message severity="warn" text="Are you sure?"></p-message>
<p-message severity="error" text="Field is required"></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>
Properties
Name | Type | Default | Description |
---|---|---|---|
value | array | null | An array of messages to display. |
closable | boolean | true | Defines if message box can be closed by the click icon. |
style | string | null | Inline style of the component. |
styleClass | string | null | Style class of the component. |
enableService | boolean | true | Whether displaying services messages are enabled. |
key | string | null | Id to match the key of the message to enable scoping in service based messaging. |
showTransitionOptions | string | 300ms ease-out | Transition options of the show animation. |
hideTransitionOptions | string | 250ms ease-in | Transition options of the hide animation. |
Styling
Following is the list of structural style classes, for theming classes visit theming page.
Name | Element |
---|---|
ui-messages | Container element. |
ui-messages-info | Container element when displaying info messages. |
ui-messages-warn | Container element when displaying warning messages. |
ui-messages-error | Container element when displaying error messages. |
ui-messages-success | Container element when displaying success messages. |
ui-messages-close | Close icon. |
ui-messages-icon | Severity icon. |
ui-messages-summary | Summary of a message. |
ui-messages-detail | Detail of a message. |
Dependencies
None.
Source
<p-messages [(value)]="msgs"></p-messages>
<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="Use Service"></button>
<h3>Inline Message CSS</h3>
<p>CSS helpers to display inline messages mostly within forms.</p>
<p-message severity="info" text="PrimeNG Rocks"></p-message>
<p-message severity="success" text="Record Saved"></p-message>
<p-message severity="warn" text="Are you sure?"></p-message>
<p-message severity="error" text="Field is required"></p-message>
<div style="margin-top:30px">
<input type="text" pInputText placeholder="Username" class="ng-dirty ng-invalid">
<p-message severity="error" text="Field is required"></p-message>
</div>
<div style="margin-top:30px">
<input type="text" pInputText placeholder="Email" class="ng-dirty ng-invalid">
<p-message severity="error"></p-message>
</div>
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: './messagesdemo.html',
styles: [`
:host ::ng-deep button {
margin-right: .25em;
}
:host ::ng-deep .ui-message,
:host ::ng-deep .ui-inputtext {
margin-right: .25em;
}
`],
providers: [MessageService]
})
export class MessagesDemo {
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'});
}
clear() {
this.msgs = [];
}
}