NgDocImageViewerComponent

Wraps an image of the page: clicking it, or pressing Enter or Space on it, opens the image at its natural size, scaled down to fit the window.

An image inside a link keeps the link's behaviour, and an image with an empty alt is decorative: neither becomes a button.

Decorators: @Component
Selectors: ng-doc-image-viewer

DeclarationTypeScript

@Component({ … })
export class NgDocImageViewerComponent { … }

Members

Constructor

()

—

Signature

constructor(
	
): NgDocImageViewerComponent;

Properties

alt: InputSignal<string>

readonly input()required

Alternative text of the image.

element: HTMLElement

protectedreadonly

—

image: Signal<TemplateRef<any>>

protectedreadonly

—

opened: WritableSignal<boolean>

protectedreadonly

Whether the scaled image is open.

overlay: NgDocOverlayService

protectedreadonly

—

overlayRef?: NgDocOverlayRef<unknown> | undefined

protected

—

size: WritableSignal<ZoomSize>

protectedreadonly

The size of the opened image.

src: InputSignal<string>

readonly input()required

Source of the image.

window: Window | null

protectedreadonly

—

Methods

(): void

Opens the image at its natural size, scaled down to fit the window, unless the image is not interactive. The image grows from its place on the page.

Signature

clickEvent(): void;

Returns

void

(): boolean

protected

Whether the image opens: it has a text alternative and is not inside a link. The page processor moves the host into place before change detection, so the check reads the DOM where the image ends up.

Signature

protected isInteractive(): boolean;

Returns

boolean

(…): void

protected

Opens the image on Space without scrolling the page.

Signature

protected onSpace(event: Event): void;

Parameters

Name	Type	Description
event	`Event`	The key press.

Returns

void