Angular PrimeNG PanelMenu Styling

The open-source Angular PrimeNG framework is used to create responsive websites with great simplicity and has a large set of native Angular UI components that are utilized for superb style. In this article, we will learn how to style the PanelMenu Component in Angular PrimeNG using its styling classes.

A panel-style menu can be created with the PanelMenu Component. It could be viewed as a synthesis of accordion and tree elements. Below, there is a total of 8 structural styling classes are listed.

Angular PrimeNG PanelMenu Styling:

• p-panelmenu: This class is for applying custom styling to the Container element.
• p-panelmenu-header: This class is for applying custom styling to the Accordion header of the root submenu.
• p-panelmenu-content: This class is for applying custom styling to the  Accordion content of the root submenu.
• p-menu-list: This class is for applying custom styling to the List element.
• p-menuitem: This class is for applying custom styling to the Menuitem element.
• p-menuitem-text: This class is for applying custom styling to the Label of a menu item.
• p-menuitem-icon: This class is for applying custom styling to the Icon of a menu item.
• p-panelmenu-icon: This class is for applying custom styling to the  Arrow icon of an accordion header.

Syntax:

<p-panelMenu 
    [model]="...">
</p-panelMenu>

Creating Angular application and Installing the modules:

Step 1: Use the command below to create an Angular application.

ng new appname

Step 2: Use the following command to move to our project folder, appname, after creating it.

cd appname

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

ng serve --open

Example 1: In this example, we have used a custom class for styling the PanelMenu Component.

• app.component.html:

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 PanelMenu Styling</h3>
<p-panelMenu [model]="gfg"
    [styleClass]="'gfgStyling'">
</p-panelMenu>

• app.component.ts:

Javascript

import { Component } from "@angular/core";
import { MenuItem } from "primeng/api";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"]
})

export class AppComponent {
    gfg: MenuItem[] = [];

    ngOnInit() {
        this.gfg = [
            {
                label: "HTML",
                items: [
                    {
                        label: "HTML 1"
                    },
                    {
                        label: "HTML 2"
                    }
                ]
            },
            {
                label: "Angular",

                items: [
                    {
                        label: "Angular 1"
                    },
                    {
                        label: "Angular 2"
                    }
                ]
            }
        ];
    }
}

• app.module.ts:

Javascript

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { PanelMenuModule } from "primeng/panelmenu";

@NgModule({
    declarations: [AppComponent],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        PanelMenuModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})

export class AppModule {}

• style.css:

CSS

:host ::ng-deep .gfgStyling {
    font-size: 18px !important;
    font-weight: bold !important;
    font-style: italic !important;
    font-family: cursive !important;
}

:host ::ng-deep .p-panelmenu .p-panelmenu-panel {
    margin-bottom: 20px !important;
}

Output:

Example 2: In this example, we will be learning about how to style the panel menu text with its icons.

• app.component.html:

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 PanelMenu Styling</h3>
<p-panelMenu [model]="gfg"></p-panelMenu>

• app.component.ts:

Javascript

import { Component } from "@angular/core";
import { MenuItem } from "primeng/api";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"]
})

export class AppComponent {
    gfg: MenuItem[] = [];

    ngOnInit() {
        this.gfg = [
            {
                label: "GeeksforGeeks Users",
                icon: "pi pi-fw pi-user",
                items: [
                    {
                        label: "New",
                        icon: "pi pi-fw pi-user-plus"
                    },
                    {
                        label: "Delete",
                        icon: "pi pi-fw pi-user-minus"
                    }
                ]
            },
            {
                label: "GeeksforGeeks Events",
                icon: "pi pi-fw pi-calendar",
                items: [
                    {
                        label: "Edit",
                        icon: "pi pi-fw pi-pencil",
                        items: [
                            {
                                label: "Save",
                                icon: "pi pi-fw pi-calendar-plus"
                            },
                            {
                                label: "Delete",
                                icon: "pi pi-fw pi-calendar-minus"
                            }
                        ]
                    },
                    {
                        label: "Archive",
                        icon: "pi pi-fw pi-calendar-times",
                        items: [
                            {
                                label: "Remove",
                                icon: "pi pi-fw pi-calendar-minus"
                            }
                        ]
                    }
                ]
            }
        ];
    }
}

• app.module.ts:

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { PanelMenuModule } from 'primeng/panelmenu';
@NgModule({
  imports: [
      BrowserModule,
      BrowserAnimationsModule,
      PanelMenuModule
  ],
  declarations: [AppComponent],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

• style.css:

CSS

:host ::ng-deep .p-panelmenu .p-panelmenu-header > a .p-menuitem-icon {
    color: #ffffff;
}
:host ::ng-deep .p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon {
    color: #ffffff;
}
:host ::ng-deep .p-panelmenu .p-panelmenu-header.p-highlight > a {
    color: #fff !important;
}
:host ::ng-deep .p-panelmenu .p-panelmenu-header > a {
    color: #fff !important;
    background: #0da350 !important;
}
:host
    ::ng-deep
    .p-panelmenu
    .p-panelmenu-content
    .p-menuitem
    .p-menuitem-link
    .p-menuitem-text {
    color: #000 !important;
}
:host
    ::ng-deep
    .p-panelmenu
    .p-panelmenu-content
    .p-menuitem
    .p-menuitem-link
    .p-menuitem-icon {
    color: #000 !important;
}
:host ::ng-deep .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link {
    color: #000 !important;
}

Output:

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