Responsiveness

If you want to change the gallery's style on small screens, such as thumbnail position or size, A good solution is to use Angular CDK.

CDK Example:

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { GalleryItem, GalleryConfig, ThumbnailPosition } from 'ng-gallery';
import { Observable, map } from 'rxjs';


@Component({
  selector: 'gallery-example',
  template: `
      <gallery *ngIf="galleryConfig$ | async; let config"
               [items]="images$ | async"
               [thumbWidth]="config.thumbWidth"
               [thumbHeight]="config.thumbHeight"
               [thumbPosition]="config.thumbPosition"></gallery>
  `,
  standalone: true,
  imports: [GalleryModule, CommonModule]
})
class MyComponent {
  galleryConfig$: Observable<GalleryConfig>;

  constructor(breakpointObserver: BreakpointObserver) {

    this.galleryConfig$ = breakpointObserver.observe([
      Breakpoints.HandsetPortrait
    ]).pipe(
      map(res => {
        if (res.matches) {
          return {
            thumbPosition: ThumbnailPosition.Top,
            thumbWidth: 80,
            thumbHeight: 80
          };
        }
        return {
          thumbPosition: ThumbnailPosition.Left,
          thumbWidth: 120,
          thumbHeight: 90
        };
      })
    );

  }
}