DEV Community

Cover image for Angular : How to add lightbox in your angular project just in 10 minutes?
Rajesh Kumar Yadav
Rajesh Kumar Yadav Subscriber

Posted on • Originally published at developersdiscussion.com

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

#angular #typescript #npm #webdev

Demo -

Image

Step 1 - Install lightobox

Open your terminal and run below command -

 npm install --save ngx-lightbox
Enter fullscreen mode Exit fullscreen mode

Step 2 - Update your angular.json

 { "styles": ["./node_modules/ngx-lightbox/lightbox.css", ...],}
Enter fullscreen mode Exit fullscreen mode

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

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

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>
Enter fullscreen mode Exit fullscreen mode

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(); }}
Enter fullscreen mode Exit fullscreen mode

Buy Me A Coffee

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.

Top comments (2)

Collapse
 
sirinibin profile image
sirin k • • 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});

Collapse
 
paidimarri_manikanta_0cf8 profile image
paidimarri manikanta •

I am also encountering the same loading icon issue. Have you found any alternative solutions for this?

If you've successfully implemented the lightbox, I would appreciate it if you could share the method.