A responsive website may be easily created using the open-source Angular PrimeNG framework, which has a wide range of native Angular UI components for superb style. This article will learn how to style Panel Styling in Angular PrimeNG.
The Panel Component enables us to create an element with a header and some associated content. The styling classes are used to add styles to the panel.
Angular PrimeNG Panel Styling:
- p-panel: This class is used to style a container element.
- p-panel-titlebar: This class is used to style the header section.
- p-panel-title: This class is used to style the title text of the panel.
- p-panel-titlebar-toggler: This classis used to style the toggle icon.
- p-panel-content: This class is used to style the panel’s content.
Syntax:
<p-panel header="..."> ... </p-panel>
Creating Angular application and Installing the modules:
Step 1: Use the command below to create an Angular application.
ng new panelStyling
Step 2: Use the following command to move to our project folder, panelStyling, after creating it.
cd panelStyling
Step 3: Install PrimeNG in the specified location.
npm install primeng --save npm install primeicons --save
Project Structure: The project structure will look like this once the installation is finished:
Steps to run the application: Run the below command to see the output
ng serve --open
Example 1: In this example, we’ll be using the inline style or style attribute of p-panel for styling the Panel Component.
- app.component.html:
< h1 >
< span >
< img src =
class = "gfg-logo" alt = "icon" />
</ span >
< span style = "color: green; font-size: 40px;" >
GeeksforGeeks
</ span >
</ h1 >
< h3 >PrimeNG Panel Styling</ h3 >
< p-panel header = "About GeeksforGeeks" [style]="{
width: '450px',
fontFamily: 'fangsong',
fontSize: '20px',
border: '2px solid black',
borderRadius: '9px'
}">
< p >
We provide a range of services to
help you grow, learn, and have fun!
Free tutorials, millions of articles,
live, online, and in-person classes;
frequent coding competitions; webinars
with subject matter experts; internship
and employment chances. The power of
knowledge!
</ p >
</ p-panel >
|
- app.component.ts:
import { Component } from '@angular/core' ;
@Component({ selector: 'app-root' ,
templateUrl: './app.component.html' ,
styleUrls: [ './app.component.css' ]
}) export class AppComponent { title = 'panelStyling' ;
} |
- app.module.ts:
import { NgModule } from "@angular/core" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { AppComponent } from "./app.component" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { PanelModule } from "primeng/panel" ;
@NgModule({ declarations: [AppComponent],
imports: [
BrowserModule,
BrowserAnimationsModule,
PanelModule
],
providers: [],
bootstrap: [AppComponent]
}) export class AppModule {} |
Output:
Example 2: In this example, we’ll be using a pre-defined styling class for styling the Panel Component.
- app.component.html:
< h1 >
< span >
< img src =
class = "gfg-logo" alt = "icon" />
</ span >
< span style = "color: green; font-size: 40px;" >
GeeksforGeeks
</ span >
</ h1 >
< h3 >PrimeNG Panel Styling</ h3 >
< p-panel header = "About GeeksforGeeks" [toggleable]="true">
< p >
We provide a range of services
to help you grow, learn, and
have fun! Free tutorials, millions
of articles, live, online, and in-person
classes; frequent coding competitions;
webinars with subject matter experts;
internship and employment chances.
The power of knowledge!
</ p >
</ p-panel >
|
- app.component.ts:
import { Component } from '@angular/core' ;
@Component({ selector: 'app-root' ,
templateUrl: './app.component.html' ,
styleUrls: [ './app.component.css' ]
}) export class AppComponent { title = 'panelStyling' ;
} |
- app.module.ts:
import { NgModule } from "@angular/core" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { AppComponent } from "./app.component" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { PanelModule } from "primeng/panel" ;
@NgModule({ declarations: [AppComponent],
imports: [
BrowserModule,
BrowserAnimationsModule,
PanelModule
],
providers: [],
bootstrap: [AppComponent]
}) export class AppModule {} |
- app.component.css:
:host ::ng-deep .p-panel.p-component { width : 450px ;
border : 2px solid black ;
border-radius: 9px ;
} :host ::ng-deep .p-panel .p-panel-header { background : green !important ;
color : white !important ;
} :host ::ng-deep .p-panel .p-panel-header .p-panel-header- icon {
color : white !important ;
} :host ::ng-deep .p-panel .p-panel-content { background : #dee2e6 !important ;
color : black !important ;
font-weight : 500 ;
font-size : 18px ;
} :host ::ng-deep .p-panel .p-panel-header .p-panel-header-icon:focus { box-shadow: 0 0 0 0.2 rem white !important ;
} :host ::ng-deep .p-panel .p-panel-header .p-panel-header-icon:enabled:hover { background : green !important ;
} |
Output:
Reference: https://primefaces.org/primeng/panel