Angular PrimeNG Toast Component

Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. It provides a lot of templates, components, theme design, an extensive icon library, and much more. In this article, we will see the Angular PrimeNG Toast Component.

The Toast Component can be utilized to render the information or any message in an overlay. There are different kinds of toasts provided by the Angular PrimeNG, that can utilized to display the multiple message at once or stick to the specific position with having the different level of severities of messages & can be aligned them in various positions. The Toast Component also provide the specific template, in order to display on confirmation that can be cleared by clicking the button.

Angular PrimeNG Toast Components:

• Severities: This component determines the different level of severity of message & the valid values are “success”, “info”, “warn” and “error”.
• Positions: The message can be aligned to different positions, where the valid values of the position property would be top-right, top-left, bottom-right, bottom-left, top-center, bottom-center, center. The default value is “top-right”.
• Multiple: The page may contains multiple number of toast components, that need to target a specific message to a particular toast. For this, the key property can be used, in order to match the toast and the message.
• Clear: This component helps to close  the message by clicking the close icon, or can be removed it manually. This can also be achieved programmatically using the clear function of the message service.
• Templates: This component allows to customize the content, where the message instance can be accessible as an implicit variable.
• Properties: This component provides various options for customization of toast by implementing the different available properties.
• Events: This component is mainly used for callback to invoke when a message is need to be removed.
• Styling: This component has the list of structural style classes, in order to style the toast component.

Syntax: Create a Toast as follows:

• Import Toast module

import {ToastModule} from 'primeng/toast';

• Implement it using the p-toast component

<p-toast>...</p-toast>

• Show the toast as follows:

this.messageService.add({severity:'success', 
                         summary:'New Message', 
                         detail:'GeeksforGeeks'});

Creating Angular application & Module Installation:

• Create an Angular application using the following command.

ng new geeks_angular

• After creating your project folder i.e. geeks_angular, move to it using the following command.

cd geeks_angular

• Install PrimeNG in your given directory.

npm install primeng --save
npm install primeicons --save

Project Structure: The project structure will look like the following:

Example 1: In the following example, we have different toast components in different positions.

• app.component.html

HTML

<h1 style="color: green;
           text-align:center;">
      GeeksforGeeks
</h1>
<h3>Angular PrimeNG Toast Component</h3>
<p-toast></p-toast>
<p-toast position="top-left"
         key="tl">
</p-toast>
<p-toast position="top-center"
         key="tc">
</p-toast>
<p-toast position="bottom-center"
         key="bc">
</p-toast>

<h5>Positions</h5>
<div class="card" style="display:flex;
                         justify-content:space-evenly">
    <button type="button" pButton pRipple
            (click)="showTopLeft()"
            label="Top Left">
    </button>
    <button type="button" pButton pRipple
            (click)="showTopCenter()"
            label="Top Center"
        class="p-button-warning">
    </button>
    <button type="button" pButton pRipple
            (click)="showBottomCenter()"
            label="Bottom Center"
            class="p-button-success">
    </button>
</div>

• app.component.ts

Javascript

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    providers: [MessageService],
})
export class AppComponent {
    constructor(
        private messageService: MessageService,
        private primengConfig: PrimeNGConfig
    ) { }

    ngOnInit() {
        this.primengConfig.ripple = true;
    }

    showTopLeft() {
        this.messageService.add({
            key: 'tl',
            severity: 'info',
            summary: 'Info',
            detail: 'Message Content',
        });
    }

    showTopCenter() {
        this.messageService.add({
            key: 'tc',
            severity: 'success',
            summary: 'Info',
            detail: 'Message Content',
        });
    }

    showBottomCenter() {
        this.messageService.add({
            key: 'bc',
            severity: 'warn',
            summary: 'Info',
            detail: 'Message Content',
        });
    }
}

• app.module.ts

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { ButtonModule } from 'primeng/button';
import { ToastModule } from 'primeng/toast';
import { RippleModule } from 'primeng/ripple';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ToastModule,
        ButtonModule,
        RippleModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

Output:

Example 2: In the following example, we have Toast with different levels of severities of messages.

• app.component.html

HTML

<h1 style="color: green;
           text-align:center;">
      GeeksforGeeks
</h1>
<h3>Angular PrimeNG Toast Component</h3>
<p-toast></p-toast>
<p-toast position="top-left"
         key="tl">
</p-toast>
<p-toast position="top-center"
         key="tc">
</p-toast>
<p-toast position="bottom-center"
         key="bc">
</p-toast>

<h5>Severities</h5>
<div class="card"
     style="display:flex;
            justify-content:space-evenly">
    <button type="button" pButton pRipple
            (click)="showSuccess()"
            label="Success"
            class="p-button-success">
    </button>
    <button type="button" pButton pRipple
            (click)="showInfo()"
            label="Info"
            class="p-button-info">
    </button>
    <button type="button" pButton pRipple
            (click)="showWarn()"
            label="Warn"
            class="p-button-warning">
    </button>
    <button type="button" pButton pRipple
            (click)="showError()"
            label="Error"
            class="p-button-danger">
    </button>
</div>

• app.component.ts

Javascript

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    providers: [MessageService],
})
export class AppComponent {
    constructor(
        private messageService: MessageService,
        private primengConfig: PrimeNGConfig
    ) { }

    ngOnInit() {
        this.primengConfig.ripple = true;
    }

    showSuccess() {
        this.messageService.add({
            severity: 'success',
            summary: 'Success',
            detail: 'Welcome to GeeksforGeeks',
        });
    }

    showInfo() {
        this.messageService.add({
            severity: 'info',
            summary: 'Info',
            detail: 'Welcome to GeeksforGeeks',
        });
    }

    showWarn() {
        this.messageService.add({
            severity: 'warn',
            summary: 'Warn',
            detail: 'Welcome to GeeksforGeeks',
        });
    }

    showError() {
        this.messageService.add({
            severity: 'error',
            summary: 'Error',
            detail: 'Welcome to GeeksforGeeks',
        });
    }
}

• app.module.ts

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { ButtonModule } from 'primeng/button';
import { ToastModule } from 'primeng/toast';
import { RippleModule } from 'primeng/ripple';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ToastModule,
        ButtonModule,
        RippleModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

Output:

Reference: http://primefaces.org/primeng/toast