lightGallery 2.x Angular wrapper (archive)

Documentation for the legacy 2.x Angular wrapper, kept for projects that have not migrated yet.

Archived. This page documents the 2.x lightgallery/angular wrapper, which embedded the vanilla runtime. lightGallery 3 ships @lightgallery/angular, a native Angular package, start there for new projects, and see the migration guide to upgrade.

Installation

Follow the below steps to use lightGallery angular component in your application. Angular component is part of the main lightGallery package on NPM. You can import it using the following way

• Install lightGallery via NPM

npm install lightgallery

• Import lightGallery module

// For angular version 14
import { LightgalleryModule } from 'lightgallery/angular';

// lightGallery supports the last 4 major version of Angular,
// if you are using older versions of angular, you can import the respective versions
// For example, if you are using Angular version 13, you can import it using
// import { LightgalleryModule } from 'lightgallery/angular/13';

@NgModule({
    imports: [LightgalleryModule],
})
export class AppModule {}

Since, version 2.2.0, lightGallery supports the last 4 major versions of Angular. If you are using an older version of Angular, please choose the respective version.

For example, if you are using Angular version 13, you can import it by suffixing the version number as shown below

import { LightgalleryModule } from 'lightgallery/angular/13';

• import styles in styles.scss

@import '~lightgallery/scss/lightgallery';

• template

<lightgallery [settings]="settings" [onInit]="onInit">
    <a href="img/img1.jpg">
        <img alt="img1" src="img/thumb1.jpg" />
    </a>
    <a href="img/img1.jpg">
        <img alt="img2" src="img/thumb1.jpg" />
    </a>
</lightgallery>

Inputs

All lightGallery settings can be passed to angular component via settings input. Additionally, you can use lifecycle hook methods listed below to hook into lightGallery component lifecycle. Almost every method passes a detail object which holds useful plugin data

usage example

@Component({
    selector: 'gallery',
    template: `
        <lightgallery [settings]="settings" [onBeforeSlide]="onBeforeSlide">
            <a href="img/img1.jpg">
                <img alt="img1" src="img/thumb1.jpg" />
            </a>
            <a href="img/img1.jpg">
                <img alt="img2" src="img/thumb1.jpg" />
            </a>
        </lightgallery>
    `,
})
export class AppComponent {
    settings = {
        counter: false,
        plugins: [lgZoom],
    };
    onBeforeSlide = (detail: BeforeSlideDetail): void => {
        const { index, prevIndex } = detail;
        console.log(index, prevIndex);
    };
}

const lg = document.getElementById('custom-events-demo');
  // Perform any action on lightGallery initialization.
  // Init event returns the plugin instance that can be used to call any lightGallery public method
  let pluginInstance = null;
  lg.addEventListener('lgInit', (event) => {
     pluginInstance = event.detail.instance;
  });
  lightGallery(lg);

const lg = document.getElementById('custom-events-demo');
  // Perform any action before each slide transition
  lg.addEventListener('lgBeforeSlide', (event) => {
      const { index, prevIndex } = event.detail;
      alert(index, prevIndex);
  });
  lightGallery(lg);

Updating slides

lightGallery does not update slides automatically due to performance reasons. But you can easily update slides whenever needed by calling refresh method.

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
    private lightGallery!: LightGallery;
    private needRefresh = false;
    ngAfterViewChecked(): void {
        if (this.needRefresh) {
            this.lightGallery.refresh();
            this.needRefresh = false;
        }
    }
    title = 'angular-demo';
    settings = {
        counter: false,
        plugins: [lgZoom],
    };
    items = [
        {
            id: '1',
            size: '1400-800',
            src: 'img-1.jpg',
            thumb: 'thumb-1.jpg',
        },
        {
            id: '2',
            size: '1400-800',
            src: 'img-2.jpg',
            thumb: 'thumb-2.jpg',
        },
    ];
    onInit = (detail: InitDetail): void => {
        this.lightGallery = detail.instance;
    };
    addImage = () => {
        this.items = [
            ...this.items,
            {
                id: '5',
                size: '1400-800',
                src: 'img-5.jpg',
                thumb: 'thumb-5.jpg',
            },
        ];
        this.needRefresh = true;
    };
}

Edit this page on GitHub