Angular PrimeNG Styling for 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. 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 Beginner_angular
Step 2: After creating your project folder i.e. Beginner_angular, move to it using the following command.
cd Beginner_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;" > w3wiki </ 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: "w3wiki" , detail: "Welcome to w3wiki" }); } } |
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;" > w3wiki </ 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: "w3wiki" , detail: "Welcome to w3wiki" }); } } |
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:
Reference: https://primefaces.org/primeng/messages
Contact Us