PrimeNG UI Components For Angular - Sidebar, Lightbox And Tooltip

Let us learn the process of working with each of the PrimeNG components one by one in our Angular application.

Sidebar

The sidebar component is used to display the navigation bar in the side of the application. The sidebar is a panel component.

In my previous article, we have learned about PrimeNG. You can check my previous articles from the below mentioned links.

Step 1

Create a new Angular project by using the following command.

ng new PrimeNGDemo

Step 2

Open this project in Visual Studio Code and install the required packages for PrimeNG.

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

Step 3

Install bootstrap by using the following command.

npm install --save bootstrap

Step 4

Configure the required styles at the Styles section in angular.json file or in styles.css.

@import '../node_modules/primeng/resources/themes/omega/theme.css';
@import '../node_modules/primeicons/primeicons.css';
@import '../node_modules/primeng/resources/primeng.min.css';
@import '~bootstrap/dist/css/bootstrap.min.css';

Step 5

Now, open the app.component.ts file and add the following code.

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
visibleSidebar1;
visibleSidebar2;
visibleSidebar3;
visibleSidebar4;
visibleSidebar5;
}

Step 6

Now, open the app.component.html file and add the following code.

<div>
<div class="row">
<div class="col-sm-12 btn btn-primary">
Sidebar Component
</div>
</div>
<div class="row" style="margin-top:10px;margin-bottom: 10px;">
<div class="col-sm-2">
<button pButton type="button" class="btn btn-success" (click)="visibleSidebar1 = true"
icon="pi pi-arrow-right primary"></button>
</div>
<div class="col-sm-2">
<button pButton type="button" class="btn btn-success" (click)="visibleSidebar2 = true"
icon="pi pi-arrow-left"></button>
</div>
<div class="col-sm-2">
<button pButton type="button" class="btn btn-success" (click)="visibleSidebar3 = true"
icon="pi pi-arrow-down"></button>
</div>
<div class="col-sm-2">
<button pButton type="button" class="btn btn-success" (click)="visibleSidebar4 = true"
icon="pi pi-arrow-up"></button>
</div>
<div class="col-sm-2">
<button pButton type="button" class="btn btn-success" (click)="visibleSidebar5 = true"
icon="pi pi-th-large"></button>
</div>
<div class="col-sm-2">
</div>
</div>
</div>
<hr style="background-color:black" />
<p-sidebar [(visible)]="visibleSidebar1" [baseZIndex]="10000">
<div class="row" style="padding-bottom: 20px;">
<div class="col-sm-12 btn btn-primary">
Left Sidebar
</div>
</div>
<button pButton type="button" (click)="visibleSidebar1 = false" label="Cancel" class="ui-button-secondary"></button>
</p-sidebar>
<p-sidebar [(visible)]="visibleSidebar2" position="right" [baseZIndex]="10000">
<h1 style="font-weight:normal">Right Sidebar</h1>
<div class="row" style="padding-bottom: 20px;">
<div class="col-sm-12 btn btn-primary">
Right Sidebar
</div>
</div>
<button pButton type="button" (click)="visibleSidebar2 = false" label="Cancel" class="btn btn-secondary"></button>
</p-sidebar>
<p-sidebar [(visible)]="visibleSidebar3" position="top" [baseZIndex]="10000">
<div class="row" style="padding-bottom: 20px;">
<div class="col-sm-12 btn btn-primary">
Top Sidebar
</div>
</div>
<button pButton type="button" (click)="visibleSidebar3 = false" label="Cancel" class="btn btn-secondary"></button>
</p-sidebar>
<p-sidebar [(visible)]="visibleSidebar4" position="bottom" [baseZIndex]="10000">
<div class="row" style="padding-bottom: 20px;">
<div class="col-sm-12 btn btn-primary">
Bottom Sidebar
</div>
</div>
<button pButton type="button" (click)="visibleSidebar4 = false" label="Cancel" class="btn btn-secondary"></button>
</p-sidebar>
<p-sidebar [(visible)]="visibleSidebar5" [fullScreen]="true" [baseZIndex]="10000">
<div class="row" style="padding-bottom: 20px;">
<div class="col-sm-12 btn btn-primary">
Full Screen
</div>
</div>
<button pButton type="button" (click)="visibleSidebar5 = false" label="Cancel" class="btn btn-secondary"></button>
</p-sidebar>

Step 7

Now, run the project by using npm start or ng serve command and check the result.

PrimeNG UI Components For Angular - Sidebar,Lightbox and Tooltip

Click on the buttons and check.

LightBox

LightBox is a modal overlay component to display images.

Step 8

Let us expand the src folder and right-click on the Assets folder. Add a new folder under it and rename that to 'Img'.

Now, open the Img folder and add some demo images to this folder.

Step 9

Create a component. To create the component, open terminal and use the following command.

ng g c overlay

Step 10

Open the overlay.component.ts file and add the following lines.

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-overlay',
templateUrl: './overlay.component.html',
styleUrls: ['./overlay.component.css']
})
export class OverlayComponent implements OnInit {
images: any[];
constructor() {
this.images = [];
this.images.push({source:'assets/Img/1.jpg', thumbnail: 'assets/Img/1small.jpg'});
this.images.push({source:'assets/Img/2.jpg', thumbnail: 'assets/Img/2small.jpg'});
this.images.push({source:'assets/Img/3.jpg', thumbnail: 'assets/Img/3small.jpg'});
}
ngOnInit() {
}
}

Step 11

Open the overlay.component.html file and add the following lines.

<div class="row">
<div class="col-sm-12 btn btn-primary">
Phone Display
</div>
</div>
<p-lightbox [images]="images"></p-lightbox>

Step 12

Open the app.component.html file and add the following line.

<app-overlay></app-overlay>

Step 13

Now, run the project and click on the image to check.

ToolTip

Tooltips are used to display a message on mouse hover.

Step 14

In our existing app, let us create a component. To create the component, open terminal and use the following command.

ng g c Tooltip

Step 15

Open the tooltip.component.html file and add the following lines.

<div class="row">
<div class="col-sm-12 btn btn-primary">
Tooltip
</div>
</div>
<div class="container" style="padding-top:60px;">
<div class="row">
<div class="col-md-6 mx-auto">
<div class="card-group">
<div class="card p-4">
<div class="card-body">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text"><i class="icon-user"></i></span>
</div>
<input type="text" pInputText pTooltip="Enter Username" placeholder="Username" class="form-control sty1">
</div>
<div class="input-group mb-4">
<div class="input-group-prepend">
<span class="input-group-text"><i class="icon-lock"></i></span>
</div>
<input type="text" pInputText pTooltip="Enter Passward" placeholder="Passward" class="form-control sty1">
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Step 16

Configure the required PrimeNG module in the app.module.ts file. Let's import the required module in this file.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {SidebarModule} from 'primeng/sidebar';
import {ButtonModule} from 'primeng/button';
import { OverlayComponent } from './overlay/overlay.component';
import {LightboxModule} from 'primeng/lightbox';
import {TooltipModule} from 'primeng/tooltip';
import { TooltipComponent } from './tooltip/tooltip.component';
@NgModule({
declarations: [
AppComponent,
OverlayComponent,
TooltipComponent
],
imports: [
BrowserModule,BrowserAnimationsModule,
AppRoutingModule,SidebarModule,ButtonModule,LightboxModule,TooltipModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Step 17

Open the app.component.html file and add the following line.

<app-tooltip></app-tooltip>

Step 18

Run the project and check the result.

Summary

In this article, we learned how to use PrimeNG components -sidebar, lightbox, and tooltip in an Angular application.