Post
Ask Question

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.

  1. npm install primeng --save      
  2. npm install primeicons --save   
Step 3
 
Install bootstrap by using the following command.
  1. npm install --save bootstrap  

Step 4

Configure the required styles at the Styles section in angular.json file or in styles.css.
  1. @import '../node_modules/primeng/resources/themes/omega/theme.css';    
  2. @import '../node_modules/primeicons/primeicons.css';   
  3. @import '../node_modules/primeng/resources/primeng.min.css';   
  4. @import '~bootstrap/dist/css/bootstrap.min.css';  
Step 5
 
Now, open the app.component.ts file and add the following code.
  1. import { Component } from '@angular/core';    
  2.     
  3. @Component({    
  4.   selector: 'app-root',    
  5.   templateUrl: './app.component.html',    
  6.   styleUrls: ['./app.component.css']    
  7. })    
  8. export class AppComponent {    
  9.   visibleSidebar1;    
  10.   visibleSidebar2;    
  11.   visibleSidebar3;    
  12.   visibleSidebar4;    
  13.   visibleSidebar5;    
  14. }    
Step 6
 
Now, open the app.component.html file and add the following code.
  1. <div>    
  2.   <div class="row">    
  3.     <div class="col-sm-12 btn btn-primary">    
  4.       Sidebar Component    
  5.     </div>    
  6.   </div>    
  7.   <div class="row" style="margin-top:10px;margin-bottom: 10px;">    
  8.     <div class="col-sm-2">    
  9.       <button pButton type="button" class="btn btn-success" (click)="visibleSidebar1 = true"    
  10.         icon="pi pi-arrow-right primary"></button>    
  11.     </div>    
  12.     <div class="col-sm-2">    
  13.       <button pButton type="button" class="btn btn-success" (click)="visibleSidebar2 = true"    
  14.         icon="pi pi-arrow-left"></button>    
  15.     </div>    
  16.     <div class="col-sm-2">    
  17.       <button pButton type="button" class="btn btn-success" (click)="visibleSidebar3 = true"    
  18.         icon="pi pi-arrow-down"></button>    
  19.     </div>    
  20.     <div class="col-sm-2">    
  21.       <button pButton type="button" class="btn btn-success" (click)="visibleSidebar4 = true"    
  22.         icon="pi pi-arrow-up"></button>    
  23.     </div>    
  24.     <div class="col-sm-2">    
  25.       <button pButton type="button" class="btn btn-success" (click)="visibleSidebar5 = true"    
  26.         icon="pi pi-th-large"></button>    
  27.     </div>    
  28.     <div class="col-sm-2">    
  29.     </div>    
  30.     
  31.   </div>    
  32. </div>    
  33. <hr style="background-color:black" />    
  34.     
  35. <p-sidebar [(visible)]="visibleSidebar1" [baseZIndex]="10000">    
  36.   <div class="row" style="padding-bottom: 20px;">    
  37.     <div class="col-sm-12 btn btn-primary">    
  38.       Left Sidebar    
  39.     </div>    
  40.   </div>    
  41.   <button pButton type="button" (click)="visibleSidebar1 = false" label="Cancel" class="ui-button-secondary"></button>    
  42. </p-sidebar>    
  43.     
  44. <p-sidebar [(visible)]="visibleSidebar2" position="right" [baseZIndex]="10000">    
  45.   <h1 style="font-weight:normal">Right Sidebar</h1>    
  46.   <div class="row" style="padding-bottom: 20px;">    
  47.     <div class="col-sm-12 btn btn-primary">    
  48.       Right Sidebar    
  49.     </div>    
  50.   </div>    
  51.   <button pButton type="button" (click)="visibleSidebar2 = false" label="Cancel" class="btn btn-secondary"></button>    
  52. </p-sidebar>    
  53.     
  54. <p-sidebar [(visible)]="visibleSidebar3" position="top" [baseZIndex]="10000">    
  55.   <div class="row" style="padding-bottom: 20px;">    
  56.     <div class="col-sm-12 btn btn-primary">    
  57.       Top Sidebar    
  58.     </div>    
  59.   </div>    
  60.   <button pButton type="button" (click)="visibleSidebar3 = false" label="Cancel" class="btn btn-secondary"></button>    
  61. </p-sidebar>    
  62.     
  63. <p-sidebar [(visible)]="visibleSidebar4" position="bottom" [baseZIndex]="10000">    
  64.   <div class="row" style="padding-bottom: 20px;">    
  65.     <div class="col-sm-12 btn btn-primary">    
  66.       Bottom Sidebar    
  67.     </div>    
  68.   </div>    
  69.   <button pButton type="button" (click)="visibleSidebar4 = false" label="Cancel" class="btn btn-secondary"></button>    
  70. </p-sidebar>    
  71.     
  72. <p-sidebar [(visible)]="visibleSidebar5" [fullScreen]="true" [baseZIndex]="10000">    
  73.   <div class="row" style="padding-bottom: 20px;">    
  74.     <div class="col-sm-12 btn btn-primary">    
  75.       Full Screen    
  76.     </div>    
  77.   </div>    
  78.   <button pButton type="button" (click)="visibleSidebar5 = false" label="Cancel" class="btn btn-secondary"></button>    
  79. </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.

PrimeNG UI Components For Angular - Sidebar,Lightbox and Tooltip
 
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.
 
PrimeNG UI Components For Angular - Sidebar,Lightbox and Tooltip
 
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. 
  1. import { Component, OnInit } from '@angular/core';    
  2.     
  3. @Component({    
  4.   selector: 'app-overlay',    
  5.   templateUrl: './overlay.component.html',    
  6.   styleUrls: ['./overlay.component.css']    
  7. })    
  8. export class OverlayComponent implements OnInit {    
  9.   images: any[];    
  10.   constructor() {     
  11.     this.images = [];    
  12.     this.images.push({source:'assets/Img/1.jpg', thumbnail: 'assets/Img/1small.jpg'});    
  13.     this.images.push({source:'assets/Img/2.jpg', thumbnail: 'assets/Img/2small.jpg'});    
  14.     this.images.push({source:'assets/Img/3.jpg', thumbnail: 'assets/Img/3small.jpg'});    
  15.   }    
  16.     
  17.   ngOnInit() {    
  18.   }    
  19.     
  20. }    
Step 11
 
Open the overlay.component.html file and add the following lines.
  1. <div class="row">    
  2.     <div class="col-sm-12 btn btn-primary">    
  3.         Phone Display    
  4.     </div>    
  5.   </div>    
  6. <p-lightbox [images]="images"></p-lightbox>    
Step 12
 
Open the app.component.html file and add the following line.
  1. <app-overlay></app-overlay>    
Step 13
 
Now, run the project and click on the image to check.
 
PrimeNG UI Components For Angular - Sidebar,Lightbox and Tooltip
 
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.
  1.   <div class="row">    
  2.       <div class="col-sm-12 btn btn-primary">    
  3.        Tooltip    
  4.       </div>    
  5.     </div>    
  6. <div class="container" style="padding-top:60px;">    
  7.   <div class="row">    
  8.     <div class="col-md-6 mx-auto">    
  9.       <div class="card-group">    
  10.         <div class="card p-4">    
  11.           <div class="card-body">    
  12.             <div class="input-group mb-3">    
  13.               <div class="input-group-prepend">    
  14.                 <span class="input-group-text"><i class="icon-user"></i></span>    
  15.               </div>    
  16.               <input type="text" pInputText pTooltip="Enter Username" placeholder="Username" class="form-control sty1">    
  17.             </div>    
  18.             <div class="input-group mb-4">    
  19.               <div class="input-group-prepend">    
  20.                 <span class="input-group-text"><i class="icon-lock"></i></span>    
  21.               </div>    
  22.               <input type="text" pInputText pTooltip="Enter Passward" placeholder="Passward" class="form-control sty1">    
  23.             </div>    
  24.           </div>    
  25.         </div>    
  26.       </div>    
  27.     </div>    
  28.   </div>    
  29. </div>    
Step 16
 
Configure the required PrimeNG module in the app.module.ts file. Let's import the required module in this file.
  1. import { BrowserModule } from '@angular/platform-browser';    
  2. import { NgModule } from '@angular/core';    
  3. import { BrowserAnimationsModule } from "@angular/platform-browser/animations";      
  4. import { AppRoutingModule } from './app-routing.module';    
  5. import { AppComponent } from './app.component';    
  6. import {SidebarModule} from 'primeng/sidebar';    
  7. import {ButtonModule} from 'primeng/button';    
  8. import { OverlayComponent } from './overlay/overlay.component';    
  9. import {LightboxModule} from 'primeng/lightbox';    
  10. import {TooltipModule} from 'primeng/tooltip';    
  11. import { TooltipComponent } from './tooltip/tooltip.component';    
  12. @NgModule({    
  13.   declarations: [    
  14.     AppComponent,    
  15.     OverlayComponent,    
  16.     TooltipComponent    
  17.   ],    
  18.   imports: [    
  19.     BrowserModule,BrowserAnimationsModule,    
  20.     AppRoutingModule,SidebarModule,ButtonModule,LightboxModule,TooltipModule    
  21.   ],    
  22.   providers: [],    
  23.   bootstrap: [AppComponent]    
  24. })    
  25. export class AppModule { }    
Step 17
 
Open the app.component.html file and add the following line. 
  1. <app-tooltip></app-tooltip>   
Step 18
 
Run the project and check the result.
 
PrimeNG UI Components For Angular - Sidebar,Lightbox and Tooltip
 

Summary

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


Similar Articles