Open image gallery in lightbox in Angular Apps

In this article, we discuss how to open image gallery in our angular application. First, we need to install “Ngx-Lightbox” module in our application.

npm install --save ngx-lightbox

After installing module we need to import their CSS in our angular.json file

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

After adding CSS now we need to import module in our “app.module.ts” file.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
//lightbox
import { LightboxModule } from 'ngx-lightbox';

@NgModule({
  imports:      [ BrowserModule, FormsModule, LightboxModule  ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

We need to create albums for display images, each albums item contains maily 3 proertyies.
1) src: Required field – it contains main image path when click on the thumbnail or text.
2) caption: Optional field – Name of the image display below the image.
3) thumb: Optional field – small image of the main.

Below is the running embedded code for open image gallery.