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

Get support on Angular & Typescript related technology.
Post Reply
admin
Site Admin
Posts: 44

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

Post by admin » Thu May 21, 2020 2:22 am

Image

Demo -
Image

Step 1 - Install lightobox
Open your terminal and run below command -

Code: Select all

npm install --save ngx-lightbox
Step 2 - Update your angular.json

Code: Select all

{
  "styles": [
    "./node_modules/ngx-lightbox/lightbox.css",
    ...
  ],
}
Step 3 - Add Lightbox Module to your app.module.ts

Code: Select all

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

Code: Select all

<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

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();
  }
}
 

Post Reply