Image and video gallery for Angular

Full featured image and video lightbox gallery component for Angular.

lightGallery 3 ships @lightgallery/angular, a native Angular component, not a wrapper. It is a standalone component with signal inputs and outputs, zoneless change detection and CDK overlay/a11y, published in Angular Package Format with one secondary entry point per feature. State and gallery logic come from the shared headless core, so behavior matches the vanilla, React and Vue packages exactly.

Install

npm install @lightgallery/angular @angular/cdk lightgallery

Peer ranges are @angular/core, @angular/common, @angular/platform-browser and @angular/cdk >=21 <23. There is no zone.js in the package. Import the stylesheets in your root stylesheet, or add the same paths to the styles array in angular.json:

/* src/styles.css */
@import 'lightgallery/css/lightgallery.css';
@import 'lightgallery/css/lg-thumbnail.css';
@import 'lightgallery/css/lg-zoom.css';

A gallery in one component

import { Component } from '@angular/core';
import {
    LgGalleryComponent,
    LgGalleryItemDirective,
    type LgGalleryItem,
} from '@lightgallery/angular';
import { withThumbnail } from '@lightgallery/angular/plugins/thumbnail';
import { withZoom } from '@lightgallery/angular/plugins/zoom';

@Component({
    selector: 'app-gallery',
    imports: [LgGalleryComponent, LgGalleryItemDirective],
    template: `
        <lg-gallery [features]="features">
            @for (item of items; track item.src) {
                <a [href]="item.src" [lgGalleryItem]="item">
                    <img [src]="item.thumb" [alt]="item.alt" />
                </a>
            }
        </lg-gallery>
    `,
})
export class Gallery {
    features = [withThumbnail({ thumbWidth: 120 }), withZoom({ scale: 1.5 })];

    items: LgGalleryItem[] = [
        {
            src: 'img/1-1600.jpg',
            thumb: 'img/1-240.jpg',
            alt: 'Mountains',
            lgSize: '1600-1067',
            caption: 'Mountains',
        },
    ];
}

Prefer to own the state? Pass [slides] with [open]/(closed) and [(index)]. Both modes are documented in the Angular package docs.

What you get

• All 14 features as tree-shakable entry points with with<Name>() factories, thumbnails, zoom, video, autoplay, fullscreen, hash deep links, pager, share, rotate, comments, medium-style zoom, relative captions, Vimeo thumbnails and origin crop, plus the justified layout.
• Idiomatic Angular API: settings are same-named signal inputs ([speed], [loop], [captionPosition]), events are outputs without the on prefix ((afterSlide)), and the gallery chrome comes from ng-template directives (lgCaption, lgCounter, lgPrevButton, lgNextButton).
• Zoneless-ready and fully typed, including LgGalleryItem for slide data and an exportAs handle for imperative control.
• SSR-safe: entry points import cleanly in bare Node and the overlay mounts after hydration, so trigger markup server-renders and galleries stay crawlable.
• Accessibility: dialog semantics via CDK, focus trap and restore, keyboard operable thumbnails and pager, prefers-reduced-motion support.

Next steps

• Angular package docs, the full input surface, all features, SSR and accessibility notes.
• Angular image gallery demo and Angular video gallery demo, live galleries with the code behind them.
• Settings reference, every setting, shared by all four packages.

Using the 2.x wrapper? The old lightgallery/angular component is documented in the 2.x Angular archive, and the migration guide covers the move to the native package.

Edit this page on GitHub