DEV Community

loading...
Cover image for Angular Toast

Angular Toast

primetek profile image PrimeTek ・2 min read

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';
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
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();
    }
}
Enter fullscreen mode Exit fullscreen mode

Positions

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

<p-toast position="top-left"></p-toast>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
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'});
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
this.messageService.clear();            //clears messages of both toast components
this.messageService.clear('myKey1');    //clears messages of the first toast only
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

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

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.

Discussion (0)

pic
Editor guide