Home Angular 10 Angular 10 Lightbox Working Tutorial

Angular 10 Lightbox Working Tutorial

by therichpost
Angular Lightbox Working Tutorial

Hello to all, welcome to therichpost.com. In this post, I will tell you about, Angular 10 Lightbox Working Tutorial.

Angular 10 Lightbox

Angular10 came and if you are new then you must check below two links:

  1. Angular10 for beginners
  2. Angular10 Basic Tutorials

Here are the working code snippet for Angular 10 Lightbox Working Tutorial and code snippet, please follow carefully:

1. Here is the command you need to run to install lightbox module into your angular 10 application:

npm i ngx-lightbox


2. Here is the code you need to add your angular.json file:

  "styles": [


3. Here is the code you need to add into your app.module.ts file:

import { LightboxModule } from 'ngx-lightbox';
  imports: [ LightboxModule ]


4. Here is the code you need to add into your app.component.ts file:

import { Lightbox } from 'ngx-lightbox';
export class AppComponent {
  _albums = [];
  constructor(private _lightbox: Lightbox) {
    for (let i = 1; i <= 4; i++) {
      const src = 'https://themyth92.com/project/ngx-lightbox/demo/img/image' + i + '.jpg';
      const caption = 'Image ' + i + ' caption here';
      const thumb = 'https://themyth92.com/project/ngx-lightbox/demo/img/image' + i + '-thumb.jpg';
      const album = {
         src: src,
         caption: caption,
         thumb: thumb
  open(index: number): void {
    // open lightbox
    this._lightbox.open(this._albums, index);
  close(): void {
    // close lightbox programmatically


5. Here is the code you need to add into your app.component.html file:

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


Now we are done friends. If you have any kind of query or suggestion or any requirement then feel free to comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. For better understanding must watch video above.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.



You may also like


Faithless May 20, 2021 - 7:04 pm

Very good article. Thank you.

Ajay Malhotra May 21, 2021 - 4:23 am

You are welcome.


Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.