Custom templates usage (deprecated)

This section applies for version <= 10, for usage with the latest version, please refer to this link.

The templates of the gallery item and the thumbnail can be extended by defining a custom template, then the content can be provided as an <ng-template>

Use [itemTemplate] for items and [thumbTemplate] for thumbnails.

Passing in data to a custom template

When using a custom template, additional context data can be used to render the data as needed.

Available data: let-index="index", let-type="type", let-data="data" and let-currIndex="currIndex"

Template

<gallery id="mixedExample" 
         [thumbTemplate]="thumbTemplate"
         [itemTemplate]="itemTemplate"></gallery>

<!-- Add custom template to thumbnails -->

<ng-template #thumbTemplate let-type="type">
  <span *ngIf="type === 'youtube'" class="item-type">
    <fa-icon [icon]="youtubeIcon" size="lg"></fa-icon>
  </span>
  <span *ngIf="type === 'video'" class="item-type">
    <fa-icon [icon]="videoIcon" size="lg"></fa-icon>
  </span>
</ng-template>

<!-- Add custom template to image items -->

<ng-template #itemTemplate
             let-index="index"
             let-type="type"
             let-data="data"
             let-currIndex="currIndex">
  <span *ngIf="type === 'image' && index === currIndex" 
        [@slideAnimation] 
        class="item-text">
    {{data?.title}}
  </span>
</ng-template>

Code

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

@Component({
  selector: 'advanced-example',
  templateUrl: './advanced-example.html',
  standalone: true,
  imports: [GalleryModule, CommonModule]
})
export class AdvancedExampleComponent implements OnInit {

  galleryId = 'mixedExample';

  constructor(private gallery: Gallery) { }

  ngOnInit() {
    const galleryRef: GalleryRef = this.gallery.ref(this.galleryId);

    galleryRef.addImage({
      src: 'IMAGE_URL',
      thumb: '(OPTIONAL)IMAGE_THUMBNAIL_URL',
      title: 'Some title'
    });

    galleryRef.addVideo({
      src: 'VIDEO_URL',
      thumb: '(OPTIONAL)VIDEO_THUMBNAIL_URL',
      poster: '(OPTIONAL)VIDEO_POSTER_URL'
    });

    // Add a video item with multiple url sources
    galleryRef.addVideo({
      src: [
        { url: 'MP4_URL', type: 'video/mp4' },
        { url: 'OGG_URL', type: 'video/ogg' }
      ],
      thumb: '(OPTIONAL)VIDEO_THUMBNAIL_URL',
      poster: '(OPTIONAL)VIDEO_POSTER_URL'
    });

    galleryRef.addYoutube({
      src: 'VIDEO_ID'
    });

    galleryRef.addIframe({
      src: 'IFRAME_URL',
      thumb: '(OPTIONAL)IMAGE_THUMBNAIL_URL'
    });
  }
}

If you don't want to extend the image template and instead create a custom template from scratch, check this stackblitz