
Demo -

Step 1 - Install lightobox
Open your terminal and run below command -
Code: Select all
npm install --save ngx-lightbox
Code: Select all
{
"styles": [
"./node_modules/ngx-lightbox/lightbox.css",
...
],
}
Code: Select all
import { LightboxModule } from 'ngx-lightbox';
@NgModule({
imports: [ LightboxModule ]
})
Step 4 - Add markup to html of your component
app.component.html
Code: Select all
<div *ngFor="let image of _albums; let i=index">
<img [src]="image.thumb" (click)="open(i)" />
</div>
app.component.ts
Code: Select all
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();
}
}