Angular PrimeNG Panel Styling

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=
"https://media.geeksforgeeks.org/wp-content/assets/Group 210.svg"
            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=
"https://media.geeksforgeeks.org/wp-content/assets/Group 210.svg"
          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.2rem 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