Angular PrimeNG Sidebar 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. In this article, we will know how to use the Sidebar component in Angular PrimeNG. We will also learn about the properties, events & styling along with their syntaxes that will be used in the code. 

Sidebar component: It is used to make an element that overlays at the edges of the screen.

Properties:

• visible: It specifies the visibility of the dialog. It is of the boolean data type, the default value is false.
• position: It specifies the position of the sidebar, valid values are “left”, “right”, “bottom” and “top”. It is of string data type & the default value is left.
• fullScreen: It is used to add a close icon to the header to hide the dialog. It is of boolean data type & the default value is false.
• appendTo: It is the target element to attach the dialog, valid values are “body” or a local ng-template variable of another element. It accepts any type of data & the default value is null.
• style: It is used to set the inline style of the component. It is of string data type & the default value is null.
• styleClass: It is used to set the style class of the component. It is of string data type & the default value is null.
• blockScroll: It is used to specify whether to block scrolling of the document when the sidebar is active. It is of boolean data type & the default value is false.
• baseZIndex: It is used to set the base zIndex value to use in layering. It is of number data type & the default value is 0.
• autoZIndex: It is used to specify whether to automatically manage the layering. It is of the boolean data type, the default value is true.
• modal: It is used to specify whether an overlay mask is displayed behind the sidebar. It is of the boolean data type, the default value is true.
• dismissible: It is used to specify whether to dismiss the sidebar on click of the mask. It is of the boolean data type, the default value is true.
• showCloseIcon: It is used to specify whether to display the close icon. It is of the boolean datatype, the default value is true.
• transitionOptions: It is used to set the transition options of the animation. It is of string data type & the default value is 150ms cubic-bezier(0, 0, 0.2, 1).
• ariaCloseLabel: It is used to set the aria-label of the close icon. It is of string data type & the default value is close.
• closeOnEscape: It is used to specify if pressing the escape key should hide the sidebar. It is of the boolean data type, the default value is true.

Events:

• onShow: It is a callback that is fired when a dialog is shown.
• onHide: It is a callback that is fired when a dialog is hidden.

Styling:

• p-sidebar: It is the container element
• 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 is the basic example that illustrates how to use the Sidebar component.

app.component.html

<p-sidebar [(visible)]="gfg" [baseZIndex]="10000">
  <h1 style="font-weight: normal">GeeksforGeeks</h1>

<p>Angular PrimeNG Sidebar Component</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>
<p-button (click)="gfg = true"
          label="Click Here!">
</p-button>

app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {}

app.module.ts

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: In this example, we will know how to use the position property in the Sidebar component.

app.component.html

<p-sidebar [(visible)]="gfg"
          [baseZIndex]="10000" position="right">
  <h1 style="font-weight: normal">GeeksforGeeks</h1>

  <p>Angular PrimeNG Sidebar Component</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>
<p-button (click)="gfg = true"
          label="Click Here!">
</p-button>

app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {}

app.module.ts

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: https://primeng.org/sidebar