Angular Toast

Angular Toast is used to display messages in an overlay.

Setup

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

Import

import {ToastModule} from 'primeng/toast';

Getting Started

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()" [baseZIndex]="5000">
    <ng-template let-message pTemplate="message">
        <div class="p-flex p-flex-column" style="flex: 1">
            <div class="p-text-center">
                <i class="pi pi-exclamation-triangle" style="font-size: 3rem"></i>
                <h4>{{message.summary}}</h4>
                <p>{{message.detail}}</p>
            </div>
            <div class="p-grid p-fluid">
                <div class="p-col-6">
                    <button type="button" pButton (click)="onConfirm()" label="Yes" class="p-button-success"></button>
                </div>
                <div class="p-col-6">
                    <button type="button" pButton (click)="onReject()" label="No" class="p-button-secondary"></button>
                </div>
            </div>
        </div>
    </ng-template>
</p-toast>

Animation Configuration

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

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

Another example is customizing the animation to appear from left to right.

<p-toast [showTransformOptions]="'translateX(100%)'"></p-toast>

Theming

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

Resources

Visit the PrimeNG Toast showcase for demos and documentation.