import { Component } from '@angular/core';
import { WrLightbox } from 'ngwr/lightbox';
@Component({ imports: [WrLightbox] })
export class MyComponent {}Lightbox
An image that opens full size in an overlay when clicked.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Basic usage
Click to open; Escape, the backdrop, the close button or the image itself closes it.
<wr-lightbox src="/photo.jpg" alt="Mountain lake" />Separate thumbnail
preview is the small thumbnail, src the full-size image.
<wr-lightbox
src="/photo-full.jpg"
preview="/photo-thumb.jpg"
alt="Mountain lake"
/>Caption
caption shows under the full image.
<wr-lightbox
src="/photo.jpg"
alt="Mountain lake"
caption="Geiranger, Norway — 2023"
/>Disable preview
disablePreview turns the zoom off and leaves a plain image.
<wr-lightbox src="/photo.jpg" alt="No-zoom thumbnail" disablePreview />API
| Name | Description | Type | Default |
|---|---|---|---|
openLabel | Accessible name of the thumbnail button. Falls back to alt, then image.open. | string | null | null |
closeLabel | Accessible name of the viewer's close button. Falls back to image.close, then 'Close preview'. | string | null | null |
srcrequired | Image source. | string | — |
alt | Alt text. Required for a11y; falls back to an empty string. | string | '' |
preview | Lighter source for the THUMBNAIL — a small or blurred copy, so the grid does not pull full-size images. The viewer always shows src; the thumbnail does not swap to it later. | string | null | null |
disablePreview | Disable the click-to-zoom lightbox. | boolean | false |
caption | Caption shown under the full image in the lightbox. | string | '' |
aspectRatio | Reserve space before the image resolves by fixing the thumbnail's aspect-ratio (e.g. '16 / 9', '4 / 3', or a number like 1.5). Prevents the layout jump when the intrinsic image size isn't known up front — pair it with a width and the box keeps its height from first paint. | string | number | null | null |
panelClass | Extra CSS classes for the viewer's overlay pane. The pane is appended to the overlay container, not to this component, so nothing in the consumer's own template encloses it and no descendant rule written around the trigger can reach it. This input is the only per-instance handle on it. A space-separated string works as well as an array. | WrClassInput | null |
CSS variables
Set these on the component's selector or a wrapper, not on :root: the defaults are declared on ngwr/lightbox's own element.
| Variable | Default | Declared on |
|---|---|---|
--wr-lightbox-viewer-caption-font-family | var(--wr-font-family-base) | .wr-lightbox-viewer__caption |
--wr-lightbox-viewer-caption-font-size | var(--wr-text-sm) | .wr-lightbox-viewer__caption |
--wr-lightbox-viewer-close-radius | var(--wr-border-radius-pill) | .wr-lightbox-viewer__close |
--wr-lightbox-viewer-full-radius | var(--wr-border-radius-base) | .wr-lightbox-viewer__full |
--wr-lightbox-viewer-gap | var(--wr-space-lg) | .wr-lightbox-viewer |
--wr-lightbox-viewer-padding | var(--wr-space-lg) | .wr-lightbox-viewer |
Dependencies
| Angular CDK | a11y, portal |
|---|---|
| Built on | Overlay |