# Image and video gallery for Angular

> Native Angular image and video gallery component, standalone, signal inputs, zoneless, CDK overlay, thumbnails, pinch zoom and SSR support.

Full featured image and video lightbox gallery component for Angular.

Canonical page: https://www.lightgalleryjs.com/docs/angular-image-video-gallery/

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

```bash
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`:

```css
/* 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

```ts
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](/docs/angular/).

## What you get

-   **All 14 features** as tree-shakable entry points with `with()`
    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](/docs/angular/), the full input surface, all
    features, SSR and accessibility notes.
-   [Angular image gallery demo](/demos/angular-image-gallery/) and
    [Angular video gallery demo](/demos/angular-video-gallery/), live
    galleries with the code behind them.
-   [Settings reference](/docs/settings/), 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](/docs/v2/angular/), and the
> [migration guide](/docs/migration/) covers the move to the native package.