Open In App

Angular PrimeNG Message Service

Improve
Improve
Like Article
Like
Save
Share
Report

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. This article will show us how to use the Messages Service in Angular PrimeNG. We will also learn about the properties with their syntaxes that will be used in the code.

The Messages component is used to display a message with particular severity. The Message Service can be used by importing the class & define it as a provider in the component tree, as it does not need to bind the values to an array. For utilizing the multiple message components with the same message service, then the key property of the component will be used to match with the message key to implement scoping.

Syntax:

<button
    type="button" 
    pButton
    (click)="..." 
    label="...">
</button>

<p-messages></p-messages>

Angular PrimeNG Messages Service properties:

  • value: It is an array of messages to display. It is of array data type, the default value is null.

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: It will look like the following:

 

  • Run the below command to see the output:
ng serve --open

Example 1: Below is the example code that illustrates the use of Angular PrimeNG Messages Service.

app.component.html




<div style="text-align: center">
    <h2 style="color: green">
        GeeksforGeeks
    </h2>
    <h5>
        Angular PrimeNG Message Service
    </h5>
    <button type="button" pButton 
            (click)="popUpServces()" 
            label="Click Here Geek">
    </button>
    <p-messages></p-messages>
</div>


app.component.ts




import { Component } from "@angular/core";
import { MessageService } from "primeng/api";
  
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  providers: [MessageService],
})
export class AppComponent {
  constructor(private messageService: MessageService) {}
  
  popUpServces() {
    this.messageService.add({
      severity: "success",
      summary: "GeeksforGeeks",
      detail: "Success Service Message",
    });
  }
}


app.module.ts




import {ButtonModule} from 'primeng/button';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } 
   from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import {MessagesModule} from 'primeng/messages';
  
@NgModule({
   imports: [
     BrowserAnimationsModule,
     MessagesModule,
     ButtonModule,
   ],
   declarations: [ AppComponent ],
   bootstrap:    [ AppComponent ]
})
export class AppModule{}


Output:

 

Example 2: Below is another example that illustrates the Angular PrimeNG Messages Service using the error message popup.

app.component.html




<div style="text-align: center">
    <h2 style="color: green">
        GeeksforGeeks
    </h2>
    <h5>Angular PrimeNG Message Service</h5>
    <button type="button" pButton 
            (click)="popUpServces()" 
            label="Click Here Geek">
    </button>
    <p-messages></p-messages>
</div>


app.component.ts




import { Component } from "@angular/core";
import { MessageService } from "primeng/api";
  
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  providers: [MessageService],
})
export class AppComponent {
  constructor(private messageService: MessageService) {}
  
  popUpServces() {
    this.messageService.add({
      severity: "error",
      summary: "GeeksforGeeks",
      detail: "Error Service Message",
    });
  }
}


app.module.ts




import {ButtonModule} from 'primeng/button';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } 
   from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import {MessagesModule} from 'primeng/messages';
  
@NgModule({
   imports: [
     BrowserAnimationsModule,
     MessagesModule,
     ButtonModule,
   ],
   declarations: [ AppComponent ],
   bootstrap:    [ AppComponent ]
})
export class AppModule{}


Output:

 

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



Last Updated : 23 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads