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.
Top comments (2)
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});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.