Angular PrimeNG Sidebar Styling

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. In this article, we will see how to use the Sidebar component in Angular PrimeNG.

The Sidebar component is used to make an element that overlays at the edges of the screen. The Sidebar can be styled with the help of Angular PrimeNG, which provides various styling properties, such as positioning the sidebar, closing or adjusting the size of the sidebar, etc.

Angular PrimeNG Sidebar Styling:

• p-sidebar: It is the container element for the Sidebar.
• p-sidebar-left: It is the container element of the left sidebar.
• p-sidebar-right: It is the container element of the right sidebar.
• p-sidebar-top: It is the container element of the top sidebar.
• p-sidebar-bottom: It is the container element of the bottom sidebar.
• p-sidebar-full: It is the container element of a full-screen sidebar.
• p-sidebar-active: It is the container element when the sidebar is visible.
• p-sidebar-close: It is the close anchor element.
• p-sidebar-sm: It is a small-sized sidebar.
• p-sidebar-md: It is the medium-sized sidebar.
• p-sidebar-lg: It is a large-sized sidebar.
• p-sidebar-mask: It is the modal layer of the sidebar.

Creating Angular application & module installation:

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

ng new appname

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

cd appname

Step 3: Install PrimeNG in your given directory.

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

Project Structure: It will look like the following:

Example 1: This example describes the basic usage of the Angular PrimeNG Sidebar Styling by implementing the p-sidebar & p-sidebar-right components.

• app.component.html

HTML

<h1 style="color:green">
    GeeksforGeeks
</h1>
<h2>
    Angular PrimeNG Sidebar Styling
</h2>
<p-button (click)="gfg = true"
          label="Click Here!">
</p-button>
<p-sidebar [(visible)]="gfg"
           [baseZIndex]="10000"
           position="right">
    <h1>GeeksforGeeks</h1>
    <p>Angular PrimeNG Sidebar Styling</p>
    <p-button type="button"
              (click)="gfg = false"
              label="OK"
              styleClass="p-button-info">
    </p-button>
    <p-button type="button"
              (click)="gfg = false"
              label="Cancel"
              styleClass="p-button-danger">
    </p-button>
</p-sidebar>

• app.component.ts

Javascript

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
export class AppComponent {
    gfg: boolean = false
}

• 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 { ButtonModule } from "primeng/button";
import { SidebarModule } from "primeng/sidebar";

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        SidebarModule,
        ButtonModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Output:

Example 2: This is another example that describes the use of the Angular PrimeNG Sidebar Styling by implementing the p-sidebar-md & the p-sidebar-top component.

• app.component.html

HTML

<h1 style="color:green">
    GeeksforGeeks
</h1>
<h2>
    Angular PrimeNG Sidebar Styling
</h2>
<p-button (click)="gfg = true"
          label="Click Here!">
</p-button>
<p-sidebar [(visible)]="gfg"
           [baseZIndex]="10000"
           styleClass="p-sidebar-md"
           position="top">
    <h1>GeeksforGeeks</h1>
    <p>Angular PrimeNG Sidebar Styling</p>

    <p-button type="button"
              (click)="gfg = false"
              label="OK"
              styleClass="p-button-info">
    </p-button>
    <p-button type="button"
              (click)="gfg = false"
              label="Cancel"
              styleClass="p-button-danger">
    </p-button>
</p-sidebar>

• app.component.ts

Javascript

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
export class AppComponent {
    gfg: boolean = false
}

• 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 { ButtonModule } from "primeng/button";
import { SidebarModule } from "primeng/sidebar";

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        SidebarModule,
        ButtonModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Output:

Reference: http://primefaces.org/primeng/sidebar