Image Viewer | Neural Native

Import

component.ts

import { NeuImageViewerComponent } from '@neural-ui/native/image-viewer';

Examples

Import ExampleComponent into its parent and place <app-example /> inside your application’s root neu-theme. The preview supplies the device frame and safe areas; use the root setup from Installation in your app.

A closer look

Open the collection, move between images and zoom in or out. The thumbnail, description and action have separate space.

View and copy the complete example

basic.component.ts

import { Component, signal } from '@angular/core';
import { NeuButtonComponent } from '@neural-ui/native/button';
import { NeuImageViewerComponent } from '@neural-ui/native/image-viewer';
import { View, Text, Image, ScrollView, Pressable } from '@ng-native/components';
import type { NeuImageItem } from '@neural-ui/native';

@Component({
  selector: 'app-example',
  imports: [NeuButtonComponent, NeuImageViewerComponent, View, Text, Image, ScrollView, Pressable],
  template: `
    <scroll-view class="product-scroll" keyboardShouldPersistTaps="handled" [showsVerticalScrollIndicator]="false"><view class="product-stack"><view class="product-section"><text class="product-title" accessibilityRole="header">A closer look</text><text class="product-caption">Landscape studies · Neural collection</text></view>
    <view class="product-section">
      <pressable accessibilityRole="button" [accessibilityLabel]="images[0].label" (press)="open.set(true)"><image class="collection-cover" [source]="{ uri: images[0].uri }" [alt]="images[0].label" resizeMode="cover" /></pressable>
      <view class="product-section"><text class="product-heading">Forest walk</text><text class="product-caption">Soft shapes, quiet colors. Open the collection to explore every detail.</text></view>
      <view class="product-actions"><neu-button label="Open image" size="sm" (pressed)="open.set(true)" /><text class="product-caption">4 illustrations</text></view>
    </view>
    <neu-image-viewer label="Original composition" [items]="images" [(open)]="open" [(index)]="index" /></view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

:host { flex: 1; flex-shrink: 1; min-height: 0; }
.product-scroll { flex: 1; flex-shrink: 1; height: 0px; min-height: 0; }
.product-stack { gap: 24px; padding-bottom: 20px; }
.product-section { gap: 12px; }
.product-row { flex-direction: row; align-items: center; gap: 12px; }
.product-copy { flex: 1; min-width: 0; gap: 4px; }
.product-title { color: var(--neu-text, #172033); font-size: 24px; line-height: 30px; font-weight: 600; }
.product-heading { color: var(--neu-text, #172033); font-size: 17px; line-height: 23px; font-weight: 600; }
.product-caption { color: var(--neu-muted, #596477); font-size: 14px; line-height: 20px; }
.product-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.product-surface { gap: 16px; padding: 16px; border-radius: 16px; background-color: var(--neu-surface, #ffffff); border-width: 1px; border-color: var(--neu-border, #a5afbf); }
.collection-cover { width: 100%; aspect-ratio: 1.333333; border-radius: 16px; }
  `,
})
export class ExampleComponent {
  readonly images: readonly NeuImageItem[] = [
    {
      "id": "forest",
      "label": "Forest walk",
      "uri": "/assets/media/v2/forest.png"
    },
    {
      "id": "desert",
      "label": "Desert shapes",
      "uri": "/assets/media/v2/desert.png"
    },
    {
      "id": "night",
      "label": "Night sky",
      "uri": "/assets/media/v2/night.png"
    },
    {
      "id": "coast",
      "label": "Quiet horizon",
      "uri": "/assets/media/v2/coast.png"
    }
  ];
  readonly index = signal(0);
  readonly open = signal(false);
}

Interactive playground

Change the settings and try the result.

Device captures shown in English.

Image Viewer · android · native capture — **Android**Native screenshot

Image Viewer · ios · native capture — **iOS**Native screenshot

API reference

Inputs

Name	Type	Default	Binding	Description
items	readonly NeuImageItem[]	[]	Input	Ordered data for the component. Use the data contract below and stable, unique item IDs.
label	string	'Image viewer'	Input	Fallback title and accessible image name when the selected image has no label. The selected image label takes priority.
closeLabel	string	'Close viewer'	Input	Text or accessible name used for close. It does not perform the action by itself.
previousLabel	string	'Previous image'	Input	Text or accessible name used for previous. It does not perform the action by itself.
nextLabel	string	'Next image'	Input	Text or accessible name used for next. It does not perform the action by itself.
zoomLabel	string	'Zoom in'	Input	Accessible name of the zoom-in action. Increases scale by 100 percentage points, up to 400%, and disables at the maximum or when no usable image exists.
zoomOutLabel	string	'Zoom out'	Input	Accessible name of the independent zoom-out action. Decreases scale by 100 percentage points, down to 100%, and disables at the minimum or when no usable image exists.
errorLabel	string	'Image could not be loaded'	Input	Text or accessible name used for error state. It does not perform the action by itself.

Models

Name	Type	Default	Binding	Description
open	boolean	false	Model · two-way	Whether the presentation or message is requested to be open. Bind a writable signal with [(open)].
index	number	0	Model · two-way	Current zero-based image or carousel position. Bind a writable signal with [(index)].

Outputs

Name	Payload	When it emits
openChange	boolean	Emits the updated open value. [(open)] binds this output together with its model input.
indexChange	number	Emits the updated index value. [(index)] binds this output together with its model input.
closed	void	Reports a close request; inspect the declared payload before sharing handlers across overlays.
opened	void	Reports that the native presentation has opened.
dismissed	void	Reports completion of native dismissal.

Model state

Bind the signal with [(modelName)] without calling it. Use modelName() to read its value.

model-fields.ts

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

// Fields inside your component class
readonly open = signal<boolean>(false);
readonly index = signal<number>(0);

Types and data interfaces

Use the imports in your application. The definitions below are provided for reference.

NeuImageItem

NeuImageItem.ts

import type { NeuImageItem } from '@neural-ui/native';

// Public definition for reference only. Import this type; do not redeclare it.
export interface NeuImageItem {
    readonly id: string;
    readonly uri: string;
    readonly label: string;
}

Field	Type	Requirement	Meaning
id	string	Required	Stable, unique identifier used for tracking and selection.
uri	string	Required	Native image or file URI.
label	string	Required	Human-readable item name.