DEV Community

loading...
Cover image for Angular : How to add lightbox in your angular project just in 10 minutes?

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

RajeshKumarYadav.com
I am Rajesh, a Technology Specialist by profession and a Technical Blogger by passion. I am passionate about knowledge sharing, open-source contributions, connecting to people, and mentoring.
Originally published at developersdiscussion.com ・2 min read

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.

Discussion (0)

Forem Open with the Forem app