Image Viewer
oge-image-viewer shows a gallery of images — product photos, scanned documents, inspection shots — with a toolbar, a thumbnail strip and a caption.
Zoom with the buttons, the wheel, a double click (fit ↔ 2×) or a two-finger pinch, always around the pointer; drag to pan while zoomed, clamped so the image never leaves the stage; rotate by quarter turns; go full screen through the Fullscreen API. Everything has a key, and a polite live region announces each image by its alt text.
Gallery
The toolbar pages, zooms, fits, rotates and toggles full screen; the thumbnails jump (the current one is aria-current). With focus on the viewer, the arrows page — or pan while zoomed — + / - zoom, 0 fits, R rotates and F goes full screen.
Turquoise Coast
A palm tree on a sandy beach by a calm blue sea, image 1 of 5Image 1 at 100%
import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { OgeImageViewer } from '@oge-ui/layout';
import type { OgeImageViewerItem } from '@oge-ui/layout';
@Component({
selector: 'demo-root',
imports: [OgeImageViewer],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<!-- Focus the viewer: arrows page (and pan while zoomed), + / - zoom,
0 fits, R rotates, F goes full screen. Drag to pan, wheel or pinch to
zoom, double click toggles fit and 2x. -->
<div style="height: 420px">
<oge-image-viewer
[images]="photos"
[(index)]="index"
(zoomChange)="zoom.set($event)"
/>
</div>
<p>Image {{ index() + 1 }} at {{ zoom() * 100 }}%</p>
`,
})
export class Demo {
protected readonly index = signal(0);
protected readonly zoom = signal(1);
protected readonly photos: OgeImageViewerItem[] = [
{
src: '/demo/carousel/coast.svg',
alt: 'A palm tree on a sandy beach by a calm blue sea',
caption: 'Turquoise Coast',
},
{
src: '/demo/carousel/mountains.svg',
alt: 'Snow-capped violet peaks under a pink evening sky',
caption: 'Kaçkar Mountains',
},
{
src: '/demo/carousel/city.svg',
alt: 'A city skyline with lit windows at sunset',
caption: 'Istanbul by night',
},
];
}Loop, zoom limit & handle
loop wraps from the last image to the first, maxZoom caps the zoom at 400 %, [thumbnails]="false" drops the strip and messages overrides one label. resetView() returns to fit.
Turquoise Coast
A palm tree on a sandy beach by a calm blue sea, image 1 of 5import { ChangeDetectionStrategy, Component } from '@angular/core';
import { OgeImageViewer } from '@oge-ui/layout';
import type { OgeImageViewerItem } from '@oge-ui/layout';
@Component({
selector: 'demo-root',
imports: [OgeImageViewer],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<!-- loop wraps from the last image to the first; maxZoom caps the zoom
at 400 %; no thumbnail strip. resetView() is public. -->
<div style="height: 360px">
<oge-image-viewer
#viewer
[images]="photos"
[loop]="true"
[maxZoom]="4"
[thumbnails]="false"
[messages]="{ resetZoom: 'Show whole image' }"
/>
</div>
<button type="button" (click)="viewer.resetView()">resetView()</button>
`,
})
export class Demo {
protected readonly photos: OgeImageViewerItem[] = [
{
src: '/demo/carousel/coast.svg',
alt: 'A palm tree on a sandy beach by a calm blue sea',
caption: 'Turquoise Coast',
},
{
src: '/demo/carousel/mountains.svg',
alt: 'Snow-capped violet peaks under a pink evening sky',
caption: 'Kaçkar Mountains',
},
{
src: '/demo/carousel/city.svg',
alt: 'A city skyline with lit windows at sunset',
caption: 'Istanbul by night',
},
];
}