Angular Lightbox Working TutorialAngular Lightbox Working Tutorial

Hello to all, welcome to therichpost.com. In this post, I will tell you about, Angular 9 – Angular Ngx-Lightbox.

angular lightbox
angular lightbox

Angular 14 came and if you are new then you must check below link:

  1. Angular14 Basic Tutorials

Here are the working commands and code snippet, please follow carefully:

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

npm i ngx-lightbox

 

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

...
{
  "styles": [
    "node_modules/ngx-lightbox/lightbox.css",
    ...
  ],
}
...

 

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

import { LightboxModule } from 'ngx-lightbox';
 
@NgModule({
  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:any = [];
  constructor(private _lightbox: Lightbox) {
    for (let i = 1; i <= 3; i++) {
      const src = 'https://therichpost.com/wp-content/uploads/2021/05/bootstrap5-carousel-slider-img' + i + '.jpg';
      const caption = 'Image ' + i + ' caption here';
      const thumb = 'https://therichpost.com/wp-content/uploads/2021/05/bootstrap5-carousel-slider-img' + i + '.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();
  }
}

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 width="100" [src]="image.thumb" (click)="open(i)" />
</div>

 

This is it and if you have any kind of query then do comment below.

Jassa

Thank you

By therichpost

Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 19, MedusaJs, Next.js, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

11 thoughts on “Angular 9 – Angular Ngx-Lightbox”
  1. First i want to say thank you for the tutorial it was straight forward an fairly simple. When i use your link with images the code seems to work, however when i try to change the src location the images does not appear. Also i have jpg and png photos in this location how can i use both.

  2. Hello this is nice tutorial but i can’t able to open light box so can you help me?

  3. Hi Sir, lightbox is not working for Videos. Can you please help me what may be issue.

Leave a Reply

Your email address will not be published. Required fields are marked *

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