Angular : How to add lightbox in your angular project just in 10 minutes?

#angular #typescript #npm #webdev

Demo -

Step 1 - Install lightobox

Open your terminal and run below command -



npm install --save ngx-lightbox

Step 2 - Update your angular.json



{ "styles": ["./node_modules/ngx-lightbox/lightbox.css", ...],}

Step 3 - Add Lightbox Module to your app.module.ts



import { LightboxModule } from 'ngx-lightbox'; @NgModule({ imports: [LightboxModule]})

You can do the next steps in your choice of components but I am assuming I need to make lightbox in app.component.html

Step 4 - Add markup to html of your component

app.component.html



<div *ngFor="let image of _albums; let i=index"> <img [src]="image.thumb" (click)="open(i)" /></div>

Step 5 - Add lightbox code to your component's ts file,

app.component.ts



import { Lightbox } from 'ngx-lightbox'; 

export class AppComponent { 
private _album: Array = []; 

constructor(private _lightbox: Lightbox) {
 for (let i = 1; i <= 4; i++) {
 const src = 'demo/img/image' + i + '.jpg'; const caption = 'Image ' + i + ' caption here'; 
 const thumb = 'demo/img/image' + i + '-thumb.jpg'; 
 const album = { src: src, caption: caption, thumb: thumb }; 
this._albums.push(album); 
} 
} 

open(index: number): void { // open lightbox 
this._lightbox.open(this._albums, index); 
} 

close(): void { // close lightbox programmatically 
this._lightbox.close(); 
}}

With all that being said, I highly recommend you keep learning!

Thank you for reading this article. Please feel free to connect with me on LinkedIn and Twitter.

Latest comments (2)

sirin k • May 27 '23 • Edited

with Angular14, The configuration options are not working. also the loading button keep on loading on top of the image.
this._lightbox.open(images, index,{showDownloadButton:true});