Angular PrimeNG Properties of Messages 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. In this article, we will learn how to use the Messages Properties in Angular PrimeNG. We will also learn about the properties, along with their syntaxes that will be used in the code.

The Messages component is used to display a message with particular severity.

Angular PrimeNG Properties of Messages Component:

• value: It is an array of messages to display. It is of array data type, the default value is null.
• closable: It defines if the message box can be closed by the click icon. It is of the boolean data type, and the default value is true.
• style: It sets the inline style of the component. It is of string data type, the default value is null.
• styleClass: It sets the style class of the component. It is of string data type, the default value is null.
• enableService: It specifies whether displaying service messages is enabled. It is of the boolean data type, and the default value is true.
• escape: It specifies whether displaying messages would be escaped or not. It is of a boolean data type, and the default value is true.
• key: It is the Id to match the key of the message to enable scoping in service-based messaging. It is of string data type, the default value is null.
• showTransitionOptions: It sets the transition options of the show animation. It is of the boolean data type, the default value is 300ms ease-out.
• hideTransitionOptions: It sets the transition options of the hide animation. It is of the boolean data type, the default value is 200ms cubic-bezier(0.86, 0, 0.07, 1).

Creating Angular application & module installation:

Step 1: Create an Angular application using the following command:

ng new appname

Step 2: After creating your project folder i.e. appname, move to it using the following command.

cd appname

Step 3: Install PrimeNG in your given directory.

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

Project Structure: After complete installation, it will look like the following:

• To run the above file run the below command:

ng serve --save

Example 1: This is the basic example that shows how to use Angular PrimeNG Messages Properties.

• app.component.html:

HTML

<h1 style="color: green">GeeksforGeeks</h1>
<h5>PrimeNG Messages Properties</h5>

<p-messages [(value)]="gfg"
            [enableService]="false">
</p-messages>

• app.component.ts:

Javascript

import { Component } from "@angular/core";
import { Message } from "primeng/api";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
})

export class AppComponent {
    gfg: Message[];

    ngOnInit() {
        this.gfg = [
            { detail: "This is a message", severity: "warn" },
            { detail: "This is a message", severity: "info" },
            { detail: "This is a message", severity: "error" },
            { detail: "This is a message", severity: "success" },
        ];
    }
}

• 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 { MessagesModule } from 'primeng/messages';
import { ButtonModule } from 'primeng/button';

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

Output:

Example 2: This is another basic example that shows how to use Angular PrimeNG Messages Properties using dynamic messages.

• app.component.html:

HTML

<div style="text-align: center">
    <h2 style="color: green">GeeksforGeeks</h2>
    <h5>Angular PrimeNG Messages Properties</h5>
    <button type="button" pButton pRipple
            (click)="showMssgs()"
            label="Show Messages"
            class="p-mr-3 p-button-success">
    </button>

    <button type="button" pButton pRipple
            (click)="clearMssgs()"
            label="Clear Messages"
            class="p-button-danger">
    </button>

    <p-messages [(value)]="gfg"
                 [enableService]="false">
    </p-messages>
</div>

• app.component.ts:

Javascript

import { Component } from "@angular/core";
import { Message } from "primeng/api";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
})

export class AppComponent {
    gfg: Message[];

    showMssgs() {
        this.gfg = [
            {
                severity: "success",
                summary: "Geek-Success",
                detail: "This is a success Geek",
            },
            {
                severity: "info",
                summary: "Geek-Info",
                detail: "This is a info Geek",
            },
        ];
    }

    clearMssgs() {
        this.gfg = [];
    }
}

• 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 { MessagesModule } from 'primeng/messages';
import { ButtonModule } from 'primeng/button';

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

Output:

Reference: https://primefaces.org/primeng/messages