Gallery

Usage

Each item contains src and an accessible alt; title is optional. Choose activeIndex for a controlled image or initialIndex for internal state. Thumbnails may appear below or beside the stage. objectFit selects contain or cover. previewEnabled opens the image viewer from the main image; its controls support zoom, rotation, flip, reset and download. All toolbar labels can be translated.

Examples

Try the interaction and open Code for the complete implementation.

Examples

Reset example

Demo Source

1 / 4

Applied image: 1 · Preview: closed · Zoom: 1 · Rotation: 0° · Flip: — · Errors: 0

Try and configure

Change the options, try the result and see the template update. Code contains the full executable example.

Try and configure

Reset example

Demo Source

1 / 4

Applied image: 1 · Preview: closed · Zoom: 1 · Rotation: 0° · Flip: — · Errors: 0

thumbnailPosition bottom

objectFit contain

maxZoom

previewEnabledshowThumbnailsshowCountershowItemNavigatorscircularEmpty collection

Advanced options · 18

Behavior and content

imageLoading lazy

initialIndex

activeIndex

closeLabel

downloadLabel

flipHorizontalLabel

flipVerticalLabel

nextLabel

previewLabel

previousLabel

resetLabel

rotateLeftLabel

rotateRightLabel

thumbnailLabel

toolbarLabel

zoomInLabel

zoomOutLabel

Accessibility

ariaLabel

Structured data, callbacks and templates are shown in the examples and API.

Code adds advanced options when they differ from the default. Current configuration data and values appear in the template state.

Template generated from your current options. Open Code for the complete example.

template.html Copy code

<neu-gallery
  [items]="images"
  [previewEnabled]="true"
  [showThumbnails]="true"
  [showCounter]="true"
  [showItemNavigators]="true"
  [circular]="false"
  [maxZoom]="3"
  thumbnailPosition="bottom"
  objectFit="contain"
  (activeIndexChange)="changeImage($event)"
  [activeIndex]="0"
  [ariaLabel]="'Illustration gallery'"
/>

State and data for this configuration

These values match the current preview. Complete handlers, Core imports and templates are in Source.

configured-state.ts Copy code

export const images = [
  {
    "src": "assets/media/coast.svg",
    "alt": "Coastal light",
    "title": "Coastal light"
  },
  {
    "src": "assets/media/forest.svg",
    "alt": "Forest walk",
    "title": "Forest walk"
  },
  {
    "src": "assets/media/desert.svg",
    "alt": "Desert shapes",
    "title": "Desert shapes"
  },
  {
    "src": "assets/media/night.svg",
    "alt": "Night sky",
    "title": "Night sky"
  }
];

Data and content

Accept activeIndexChange by updating activeIndex. previewChange, zoomChange, rotationChange and flipChange report observed viewer state. imageError identifies the item and index that failed to load. The item Template replaces main-image rendering; the caption Template replaces its caption. Keep a meaningful alt on a custom image.

Accessibility and keyboard

Use arrow keys, Home and End to navigate the stage. Thumbnails expose the active state. The preview traps focus, Escape closes it and focus returns to its trigger. Supply translated control labels, descriptive image alternatives and keyboard-safe content in Templates.

API

Inputs and Outputs match the installed package. Named types link to definitions. Every available Template has a Demo and Code example.

Inputs

Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.

Outputs

Listen to an event with (event)="handler($event)". The table explains the data your handler receives and how to use it.

Templates

ng-content projects content into the component. TemplateRef inputs receive a template; ng-template directives identify templates with a typed context. A directive shared by an entrypoint is not necessarily a slot of this component.

Name	Mechanism	Contract
NeuGalleryCaptionDirectiveView example	Public template directive (entrypoint)	ng-template[neuGalleryCaption] Declaration template.d.ts Copy code import { NeuGalleryCaptionDirective } from '@neural-ui/core/gallery'; // Public declaration (reference only) export declare class NeuGalleryCaptionDirective { } Full context context.d.ts Copy code import type { NeuGalleryCaptionContext } from '@neural-ui/core/gallery'; import { NeuGalleryCaptionDirective } from '@neural-ui/core/gallery'; // Public declaration (reference only) readonly templateRef: TemplateRef<NeuGalleryCaptionContext>;
NeuGalleryItemDirectiveView example	Public template directive (entrypoint)	ng-template[neuGalleryItem] Declaration template.d.ts Copy code import { NeuGalleryItemDirective } from '@neural-ui/core/gallery'; // Public declaration (reference only) export declare class NeuGalleryItemDirective { } Full context context.d.ts Copy code import type { NeuGalleryItemContext } from '@neural-ui/core/gallery'; import { NeuGalleryItemDirective } from '@neural-ui/core/gallery'; // Public declaration (reference only) readonly templateRef: TemplateRef<NeuGalleryItemContext>;

Each example demonstrates a different template. Switch between Demo and Code to inspect its implementation, imports and state.

Main image

NeuGalleryItemDirective

Main image

Reset example

Demo Source

1 · Active image

1 / 4

Applied image: 1 · Preview: closed · Zoom: 1 · Rotation: 0° · Flip: — · Errors: 0

Image caption

NeuGalleryCaptionDirective

Image caption

Reset example

Demo Source

1 / 4

Coastal lightIllustration 1

Applied image: 1 · Preview: closed · Zoom: 1 · Rotation: 0° · Flip: — · Errors: 0

Public Types

Open a type to inspect its definition and interface fields.

import type { NeuGalleryItem } from '@neural-ui/core/gallery';

import type { NeuGalleryCaptionContext } from '@neural-ui/core/gallery';

// Public declaration (reference only)
export interface NeuGalleryCaptionContext {
  $implicit: NeuGalleryItem;
  index: number;
}

import type { NeuImageViewerItem } from '@neural-ui/core/image-viewer';

import type { NeuGalleryItem } from '@neural-ui/core/gallery';

// Public declaration (reference only)
export type NeuGalleryItem = NeuImageViewerItem;

import type { NeuGalleryItem } from '@neural-ui/core/gallery';

import type { NeuGalleryItemContext } from '@neural-ui/core/gallery';

// Public declaration (reference only)
export interface NeuGalleryItemContext {
  $implicit: NeuGalleryItem;
  active: boolean;
  index: number;
}

import type { NeuImageViewerItem } from '@neural-ui/core/image-viewer';

// Public declaration (reference only)
interface NeuImageViewerItem {
  alt: string;
  caption?: string;
  src: string;
}

Styles and tokens

Customize supported public tokens and check both themes. Example illustrations and application state are not Core inputs.

Related components

Use related components to complete your interface.

• Carousel