@angularforge/gallery

Examples

Common gallery configurations, copy-paste ready.

Basic Gallery

<ngx-gallery [galleryImages]="images" />

Custom Layout

options: GalleryOptions = {
  customLayout: {
    orientation: 'horizontal',
    templateAreas: '"hero hero thumb1" "hero hero thumb2"',
    maxItems: 3,
    columns: { quantity: 3, value: 1, unit: 'fr' },
    rows: { quantity: 2, value: 200, unit: 'px' },
    border: { value: 8, unit: 'px' },
    height: { value: 500, unit: 'px' },
    width: { value: 100, unit: '%' },
    gap: { value: 8, unit: 'px' },
    layout: 'custom',
  },
};

options: GalleryOptions = {
  layout: { distribution: '1/4', orientation: 'vertical' },
  showControls: true,
  showCount: true,
  allPictureBtnPosition: 'bottom-right',
};

dialog: DialogShareOptions = {
  shareButtons: ['copy', 'whatsapp', 'facebook', 'email'],
  title: 'Share this photo',
  subtitle: 'Let others see this amazing shot',
  description: 'Captured during the Alpine expedition, summer 2025.',
  picture: 'https://example.com/preview.jpg',
};

Multi-language Support

<!-- English (default) -->
<ngx-gallery [galleryImages]="images" lang="en" />

<!-- Spanish -->
<ngx-gallery [galleryImages]="images" lang="es" />

Auto Play

options: GalleryOptions = {
  autoPlay: true,
  autoPlayInterval: 4000,     // change every 4 seconds
  autoPlayPauseOnHover: true, // pause when the user hovers
};

Navigation Bullets

options: GalleryOptions = { showBullets: true };

Download Button

options: GalleryOptions = { allowDownload: true };

When clicked, the browser downloads GalleryImage.src using GalleryImage.alt as the filename.

Custom Actions

import { GalleryAction } from '@angularforge/gallery';

actions: GalleryAction[] = [
  {
    label: 'Add to favorites',
    icon: '<svg ...>...</svg>', // SVG string rendered as innerHTML
    onClick: (event, index) => console.log('Favorited image', index),
  },
];

Listening to Events

<ngx-gallery
  [galleryImages]="images"
  (imageChange)="onImageChange($event)"
  (lightboxOpen)="onLightboxOpen($event)"
  (lightboxClose)="onLightboxClose()"
  (lightboxImageChange)="onLightboxImageChange($event)"
/>