Gallery Usage

There are a couple of ways to set the gallery items, here are some examples:

Basic example using the template binding

The most basic usage is to load items using an array of type GalleryItem[]

This is done using the template binding

import { Component, OnInit } from '@angular/core';
import { GalleryModule, GalleryItem, ImageItem } from 'ng-gallery';

@Component({
  template: `
    <gallery [items]="images"></gallery>
  `,
  standalone: true,
  imports: [GalleryModule]
})
export class AppComponent implements OnInit {

  images: GalleryItem[];

  ngOnInit() {
    // Set items array
    this.images = [
      new ImageItem({ src: 'IMAGE_SRC_URL', thumb: 'IMAGE_THUMBNAIL_URL' }),
      // ... more items
    ];
  }
}

By accessing GalleryComponent

Alternatively, The gallery can be accessed using the component reference.

Get the component using @ViewChild(GalleryComponent) then add items

import { Component, ViewChild, OnInit } from '@angular/core';
import { GalleryModule, GalleryComponent, ImageItem } from 'ng-gallery';

@Component({
  template: `
    <gallery></gallery>
  `,
  standalone: true,
  imports: [GalleryModule]
})
export class AppComponent implements OnInit {

  @ViewChild(GalleryComponent) gallery: GalleryComponent;

  ngOnInit() {
    // Add items individually
    this.gallery.addImage({ src: 'IMAGE_SRC_URL', thumb: 'IMAGE_THUMBNAIL_URL' });

    // Or load a new set of items
    this.gallery.load([
      new ImageItem({ src: 'IMAGE_SRC_URL', thumb: 'IMAGE_THUMBNAIL_URL' }),
      // ... more items
    ]);
  }
}

By accessing GalleryRef

Access the gallery from anywhere in your app.

Use the Gallery service to get the GalleryRef by id

import { Component, OnInit } from '@angular/core';
import { GalleryModule, Gallery, GalleryRef, ImageItem } from 'ng-gallery';

@Component({
  template: `
    <gallery id="myGallery"></gallery>
  `,
  standalone: true,
  imports: [GalleryModule]
})
export class AppComponent implements OnInit {

  constructor(private gallery: Gallery){
  }

  ngOnInit() {
    // Get the galleryRef by id
    const galleryRef = gallery.ref('myGallery');

    // Add items individually
    this.galleryRef.addImage({ src: 'IMAGE_SRC_URL', thumb: 'IMAGE_THUMBNAIL_URL' });

    // Or load a new set of items
    this.galleryRef.load([
      new ImageItem({ src: 'IMAGE_SRC_URL', thumb: 'IMAGE_THUMBNAIL_URL' })
      // ... more items
    ]);
  }
}

• For creating custom templates, check the advanced usage
• A full list of gallery component inputs can be found in Gallery API
• Basic Example Demo.

Set gallery config

Using component inputs

<gallery thumbPosition="left"></gallery>

Or using Gallery service

this.gallery.ref('myPhotos', {
  thumbPosition: 'left'
}).load(items);

or globally from the module import

GalleryModule.forRoot({
  thumbPosition: 'left'
})

• A full list of gallery config can be found in Config API