Angular PrimeNG Styling for Messages Component

Last Updated : 19 Dec, 2022

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 Styling for Messages Component.

Angular PrimeNG Messages Component is used to display alerts inline and control them dynamically or place them static. The Styling for the Messages component is used to change the default styles of the component and suit the design of the website. In this article, we are going to learn the styling messages component with some examples.

Styling for Messages Component:

p-messages: It is a container element.
p-message: It is a message element.
p-message-info: It is a message element when displaying info messages.
p-message-warn: It is a message element when displaying warning messages.
p-message-error: It is a message element when displaying error messages.
p-message-success: It is a message element when displaying success messages.
p-message-close: It is a close button.
p-message-close-icon: It is a close icon.
p-message-icon: It is a severity icon.
p-message-summary: It is a summary of a message.
p-message-detail: It is a detail of a message.

Styling for the Message Component:

p-inline-message: It is the message element.
p-inline-message-info: It is the message element when displaying info messages.
p-inline-message-warn: It is the message element when displaying warning messages.
p-inline-message-error: It is the message element when displaying error messages.
p-inline-message-success: It is the message element when displaying success messages.
p-inline-message-icon: It is the severity icon.
p-inline-message-text: It is the text of a message.

Syntax: Apply the CSS as follows:

:host ::ng-deep .p-messages {
  // CSS Styles
}

Creating Angular application & Module Installation:

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

ng new geeks_angular

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

cd geeks_angular

Step 3: Install PrimeNG in your given directory.

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

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

Steps to run the application: Run the below command to see the output

ng serve --save

Example 1: Below is the example code that illustrates the use of the Angular PrimeNG Styling for the Messages Component. In the following example, we have a Messages component with a border along the messages.

app.component.html:

HTML

<h1 style="color: green; text-align: center;"> 
    GeeksforGeeks 
</h1> 
<h3>Angular PrimeNG Styling for Messages Component</h3> 
  
<p-button type="button" 
    (click)="showViaService()"> 
      Show 
</p-button> 
<p-button type="button" 
    (click)="clear()"> 
      Hide 
</p-button> 
<p-messages [(value)]="msgs"></p-messages>

app.component.css:

CSS

:host ::ng-deep .p-messages { 
    border: solid #8a427a; 
    border-width: 6px; 
    color: #2c1e30; 
    padding: 12px; 
}

app.component.ts:

Javascript

import { Component } from "@angular/core"; 
import { PrimeNGConfig } from "primeng/api"; 
import { MessageService } from "primeng/api"; 
  
@Component({ 
    selector: "app-root", 
    templateUrl: "./app.component.html", 
    styleUrls: ["./app.component.css"], 
    providers: [MessageService] 
}) 
  
export class AppComponent { 
    constructor(private messageService: MessageService) {} 
  
    ngOnInit() {} 
  
    clear() { 
        this.messageService.clear(); 
    } 
    showViaService() { 
        this.messageService.add({ 
            severity: "success", 
            summary: "GeeksforGeeks", 
            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 { CarouselModule } from "primeng/carousel"; 
import { ButtonModule } from "primeng/button"; 
import { ImageModule } from "primeng/image"; 
import { MessagesModule } from "primeng/messages"; 
import { MessageModule } from "primeng/message"; 
@NgModule({ 
    imports: [ 
        BrowserModule, 
        BrowserAnimationsModule, 
        CarouselModule, 
        ButtonModule, 
        FormsModule, 
        ImageModule, 
        MessageModule, 
        MessagesModule 
    ], 
    declarations: [AppComponent], 
    bootstrap: [AppComponent] 
}) 
  
export class AppModule {}

Output:

Example 2: Below is another example code in which we will apply shadow to individual messages.

app.component.html:

HTML

<h1 style="color: green; text-align: center;"> 
    GeeksforGeeks 
</h1> 
<h3>Angular PrimeNG Styling for Messages Component</h3> 
  
<p-button type="button" 
    (click)="showViaService()"> 
      Show 
</p-button> 
<p-button type="button" 
    (click)="clear()"> 
      Hide 
</p-button> 
<p-messages [(value)]="msgs"></p-messages>

app.component.css:

CSS

:host ::ng-deep .p-message { 
    box-shadow: 1px 1px 2px black, 0 0 25px rgb(9, 255, 71), 
        0 0 5px rgb(0, 58, 17); 
}

app.component.ts:

Javascript

import { Component } from "@angular/core"; 
import { PrimeNGConfig } from "primeng/api"; 
import { MessageService } from "primeng/api"; 
  
@Component({ 
    selector: "app-root", 
    templateUrl: "./app.component.html", 
    styleUrls: ["./app.component.css"], 
    providers: [MessageService] 
}) 
  
export class AppComponent { 
    constructor(private messageService: MessageService) {} 
  
    ngOnInit() {} 
  
    clear() { 
        this.messageService.clear(); 
    } 
    showViaService() { 
        this.messageService.add({ 
            severity: "success", 
            summary: "GeeksforGeeks", 
            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 { CarouselModule } from "primeng/carousel"; 
import { ButtonModule } from "primeng/button"; 
import { ImageModule } from "primeng/image"; 
import { MessagesModule } from "primeng/messages"; 
import { MessageModule } from "primeng/message"; 
@NgModule({ 
    imports: [ 
        BrowserModule, 
        BrowserAnimationsModule, 
        CarouselModule, 
        ButtonModule, 
        FormsModule, 
        ImageModule, 
        MessageModule, 
        MessagesModule 
    ], 
    declarations: [AppComponent], 
    bootstrap: [AppComponent] 
}) 
  
export class AppModule {}