Angular 14 LightGallery.js Example to Create Responsive Lightbox Image Gallery With Editor & Controls in TypeScript

Welcome folks today in this blog post we will be using the lightgallery.js library to create responsive lightbox image gallery with editor and controls in angular using typescript. All the full source code of the application is shown below.

Get Started

In order to get started you need to create a new angular project using the below command as shown below

ng new sampleapp

cd sampleapp

And after that you need to install the below library using the below command as shown below

npm i lightgallery

And now you will see the below directory structure of the angular app as shown below

And after that you need to go to app.module.ts file of your angular project and copy paste the below lines of code

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LightgalleryModule } from 'lightgallery/angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    LightgalleryModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { LightgalleryModule } from 'lightgallery/angular';

import { AppComponent } from './app.component';

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

LightgalleryModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

As you can see we are including the lightGalleryModule inside the imports array so that we can use this library inside the angular application.

Adding the HTML Template

Now we need to go to app.component.html file and add the below lines of the html code as shown below

app.component.html

<div>
  <lightgallery [settings]="settings">
    <a href="https://picsum.photos/id/1018/1000/600" data-lg-size="1000-600"
            data-lg-thumbnail="https://picsum.photos/id/1018/250/150">
            <img src="https://picsum.photos/id/1018/250/150">
        </a>
        <a href="https://picsum.photos/id/102/1000/600" data-lg-size="1000-600"
            data-lg-thumbnail="https://picsum.photos/id/102/250/150">
            <img src="https://picsum.photos/id/102/250/150">
        </a>
        <a href="https://picsum.photos/id/1005/1000/600" data-lg-size="1000-600"
            data-lg-thumbnail="https://picsum.photos/id/1005/250/150">
            <img src="https://picsum.photos/id/1005/250/150">
        </a>
  </lightgallery>
</div>

<div>

<a href="https://picsum.photos/id/1018/1000/600" data-lg-size="1000-600"

data-lg-thumbnail="https://picsum.photos/id/1018/250/150">

</a>

<a href="https://picsum.photos/id/102/1000/600" data-lg-size="1000-600"

data-lg-thumbnail="https://picsum.photos/id/102/250/150">

</a>

<a href="https://picsum.photos/id/1005/1000/600" data-lg-size="1000-600"

data-lg-thumbnail="https://picsum.photos/id/1005/250/150">

</a>

</lightgallery>

</div>

As you can see we have the LightGallery widget and inside it we are passing the settings variable that we define inside the typescript code and then we have the series of images that will be displayed inside the gallery.

Adding the CSS Plugins

Now guys before writing the typescript code we need to include all the plugins of the lightgallery module which include the css files as well. Now go to app.component.css file and copy paste the below lines of code as shown below

app.component.css

@import url('https://cdn.jsdelivr.net/npm/lightgallery@2.0.0-beta.4/css/lightgallery.css');
@import url('https://cdn.jsdelivr.net/npm/lightgallery@2.0.0-beta.4/css/lg-zoom.css');
@import url('https://cdn.jsdelivr.net/npm/lightgallery@2.0.0-beta.4/css/lg-video.css');
@import url('https://cdn.jsdelivr.net/npm/lightgallery@2.0.0-beta.4/css/lg-share.css');
@import url('https://cdn.jsdelivr.net/npm/lightgallery@2.0.0-beta.4/css/lg-rotate.css');
@import url('https://cdn.jsdelivr.net/npm/lightgallery@2.0.0-beta.4/css/lg-thumbnail.css');
body {
  margin: 0;
}
.gallery-item {
  margin: 5px;
}

@import url('https://cdn.jsdelivr.net/npm/lightgallery@2.0.0-beta.4/css/lightgallery.css');

@import url('https://cdn.jsdelivr.net/npm/lightgallery@2.0.0-beta.4/css/lg-zoom.css');

@import url('https://cdn.jsdelivr.net/npm/lightgallery@2.0.0-beta.4/css/lg-video.css');

@import url('https://cdn.jsdelivr.net/npm/lightgallery@2.0.0-beta.4/css/lg-share.css');

@import url('https://cdn.jsdelivr.net/npm/lightgallery@2.0.0-beta.4/css/lg-rotate.css');

@import url('https://cdn.jsdelivr.net/npm/lightgallery@2.0.0-beta.4/css/lg-thumbnail.css');

body {

margin: 0;

}

.gallery-item {

margin: 5px;

}

Adding the TypeScript Code

Now we need to go to app.component.ts file and add the below lines of typescript code to show the lightgallery for the images that we have defined inside the template

app.component.ts

import { Component } from '@angular/core';
import lgZoom from 'lightgallery/plugins/zoom';
import lgVideo from 'lightgallery/plugins/video';
import lgThumbnail from 'lightgallery/plugins/thumbnail';
import lgShare from 'lightgallery/plugins/share';
import lgRotate from 'lightgallery/plugins/rotate';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
 
  title = 'angular-demo';
  settings = {
    counter: true,
    plugins: [lgZoom, lgVideo,lgThumbnail,lgShare,lgRotate]
  };
}

import { Component } from '@angular/core';

import lgZoom from 'lightgallery/plugins/zoom';

import lgVideo from 'lightgallery/plugins/video';

import lgThumbnail from 'lightgallery/plugins/thumbnail';

import lgShare from 'lightgallery/plugins/share';

import lgRotate from 'lightgallery/plugins/rotate';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css'],

})

export class AppComponent {

title = 'angular-demo';

settings = {

counter: true,

plugins: [lgZoom, lgVideo,lgThumbnail,lgShare,lgRotate]

};

}

As you can see we are requiring all the plugins of the lightgallery module and then we are making the settings object and then we are passing all the plugins inside the plugins array which is required for the different functionalities that you see inside the image gallery as shown below