ToastToast is used to display messages in an overlay.

Documentation

Import

import {ToastModule} from 'primeng/toast';
 

Getting Started

A single message is specified by the Message interface having the following properties.

A message is displayed using a MessageService, make sure your component has an injectable MessageService defined as a provider otherwise Toast cannot be utilized.

<p-toast></p-toast>
 

import {Component} from '@angular/core';
import {MessageService} from 'primeng/api';
@Component({
    templateUrl: './my.component.html'
})
export class MyComponent {
    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();
    }
}
 

Positions

Toast supports various positions where default is "top-right".

<p-toast position="top-left"></p-toast>
 

Valid values of the position property would be;

• top-right
• top-left
• bottom-right
• bottom-left
• top-center
• bottom-center
• center

Targeting Messages

A page may have multiple toast components, in case you'd like to target a specific message to a particular toast, use the key property so that toast and the message can match.

<p-toast key="myKey1"></p-toast>
<p-toast key="myKey2"></p-toast>
 

this.messageService.add({key: 'myKey1': severity:'success', summary: 'Summary Text', detail: 'Detail Text'});
this.messageService.add({key: 'myKey2': severity:'success', summary: 'Summary Text', detail: 'Detail Text'});
 

Clearing Messages

Clicking the close icon on the message, removes it manually. Same can also be achieved programmatically using the clear function of the message service. Calling it without any arguments, removes all displayed messages whereas calling it with a key, removes the messages displayed on a toast having the same key.

<p-toast key="myKey1"></p-toast>
<p-toast key="myKey2"></p-toast>
 

this.messageService.clear();            //clears messages of both toast components
this.messageService.clear('myKey1');    //clears messages of the first toast only
 

Templating

Templating allows customizing the content where the message instance is available as the implicit variable.

<p-toast position="center" key="c" (onClose)="onReject()" [modal]="true" [baseZIndex]="5000">
    <ng-template let-message pTemplate="message">
        <div style="text-align: center">
            <i class="pi pi-exclamation-triangle" style="font-size: 3em"></i>
            <h3>{{message.summary}}</h3>
            <p>{{message.detail}}</p>
        </div>
        <div class="ui-g ui-fluid">
            <div class="ui-g-6">
                <button type="button" pButton (click)="onConfirm()" label="Yes" class="ui-button-success"></button>
            </div>
            <div class="ui-g-6">
                <button type="button" pButton (click)="onReject()" label="No" class="ui-button-secondary"></button>
            </div>
        </div>
    </ng-template>
</p-toast>
 

Animation Configuration

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

<p-toast [showTransitionOptions]="'0ms'" [hideTransitionOptions]="'0ms'"></p-toast>
 

Properties

Events

Styling

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

Dependencies

None.

Source

View on GitHub

<p-toast [style]="{marginTop: '80px'}"></p-toast>
<p-toast [style]="{marginTop: '80px'}" position="top-left" key="tl"></p-toast>
<p-toast [style]="{marginTop: '80px'}" position="top-center" key="tc"></p-toast>
<p-toast [style]="{marginTop: '80px'}" styleClass="custom-toast" key="custom" position="bottom-center"></p-toast>
<p-toast position="center" key="c" (onClose)="onReject()" [modal]="true" [baseZIndex]="5000">
    <ng-template let-message pTemplate="message">
        <div style="text-align: center">
            <i class="pi pi-exclamation-triangle" style="font-size: 3em"></i>
            <h3>{{message.summary}}</h3>
            <p>{{message.detail}}</p>
        </div>
        <div class="ui-g ui-fluid">
            <div class="ui-g-6">
                <button type="button" pButton (click)="onConfirm()" label="Yes" class="ui-button-success"></button>
            </div>
            <div class="ui-g-6">
                <button type="button" pButton (click)="onReject()" label="No" class="ui-button-secondary"></button>
            </div>
        </div>
    </ng-template>
</p-toast>
<h3 class="first">Severities</h3>
<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>
<h3>Multiple</h3>
<button type="button" pButton (click)="showMultiple()" label="Multiple"></button>
<h3>Clear</h3>
<button type="button" pButton (click)="clear()" icon="pi pi-times" label="Remove All"></button>
<h3>Positions</h3>
<button type="button" pButton (click)="showTopLeft()" label="Top Left" class="ui-button-success"></button>
<button type="button" pButton (click)="showTopCenter()" label="Top Center" class="ui-button-info"></button>
<h3>Template</h3>
<button type="button" pButton (click)="showConfirm()" label="Confirm" class="ui-button-warning"></button>
 

@Component({
    templateUrl: './toastdemo.html',
    styles: [`
        :host ::ng-deep button {
            margin-right: .25em;
        }
        :host ::ng-deep .custom-toast .ui-toast-message {
            color: #ffffff;
            background: #FC466B;
            background: -webkit-linear-gradient(to right, #3F5EFB, #FC466B);
            background: linear-gradient(to right, #3F5EFB, #FC466B);
        }
        :host ::ng-deep .custom-toast .ui-toast-close-icon {
            color: #ffffff;
        }
    `],
    providers: [MessageService]
})
export class ToastDemo {
    constructor(private messageService: MessageService) {}
    showSuccess() {
        this.messageService.add({severity:'success', summary: 'Success Message', detail:'Order submitted'});
    }
    showInfo() {
        this.messageService.add({severity:'info', summary: 'Info Message', detail:'PrimeNG rocks'});
    }
    showWarn() {
        this.messageService.add({severity:'warn', summary: 'Warn Message', detail:'There are unsaved changes'});
    }
    showError() {
        this.messageService.add({severity:'error', summary: 'Error Message', detail:'Validation failed'});
    }
    showCustom() {
        this.messageService.add({key: 'custom', severity:'info', summary: 'Custom Toast', detail:'With a Gradient'});
    }
    showTopLeft() {
        this.messageService.add({key: 'tl', severity:'info', summary: 'Success Message', detail:'Order submitted'});
    }
    showTopCenter() {
        this.messageService.add({key: 'tc', severity:'warn', summary: 'Info Message', detail:'PrimeNG rocks'});
    }
    showConfirm() {
        this.messageService.clear();
        this.messageService.add({key: 'c', sticky: true, severity:'warn', summary:'Are you sure?', detail:'Confirm to proceed'});
    }
    showMultiple() {
        this.messageService.addAll([
            {severity:'info', summary:'Message 1', detail:'PrimeNG rocks'},
            {severity:'info', summary:'Message 2', detail:'PrimeUI rocks'},
            {severity:'info', summary:'Message 3', detail:'PrimeFaces rocks'}
        ]);
    }
    onConfirm() {
        this.messageService.clear('c');
    }
    onReject() {
        this.messageService.clear('c');
    }
    clear() {
        this.messageService.clear();
    }
}