Update carousel config in ngOnChanges

[Dea1100]

angular-modal-gallery/projects/ks89/angular-modal-gallery/src/lib/components/carousel/carousel.component.ts

Line 294 in 282c69e

// this.configService.setConfig(this.id, this.config);

Why is this commented out? Is it possible to change this so that the config is also updated in ngOnChanges?

[Ks89]

Hi,
good question, I don't remember this.

Which kind of behaviour are you trying to implement? What is your scenario?

[Dea1100]

Hi, sorrry for my late reply.
My use case is that I have a gallery instance where I dynamically change the config, without destroying the component. Hence, the config does not change since it is only set in ngOnInit.

[StefanKern]

I have a similar issue with the PlainGalleryComponent, where I want to make the configuration responsive. Specifically, I want to display 4 items per row on desktop and 2 items per row with 2 rows on mobile.

I also noticed that the configuration is not updated once it is set. Since the config is an input, the assumption would be that it should update when the value changes. However, this is not the case...

Code example:

import { Component, HostListener, inject, OnInit, signal } from '@angular/core';
import { GalleryModule, GridLayout, Image, LineLayout, ModalGalleryRef, ModalGalleryService, PlainGalleryConfig, PlainGalleryStrategy, PlainLibConfig } from '@ks89/angular-modal-gallery';

@Component({
    selector: 'core-photos-of-myself',
    templateUrl: './photos-of-myself.component.html',
    styleUrls: ['./photos-of-myself.component.scss'],
    imports: [
      GalleryModule
    ]
})
export class XComponent implements OnInit {
  modalGalleryService = inject(ModalGalleryService);

  imageData = [
    new Image(0, {img: '/assets/1.jpg'}),
    new Image(1, {img: '/assets/2.jpg'}),
    new Image(2, {img: '/assets/3.jpg'}),
    new Image(3, {img: '/assets/4.jpg'})
  ];

  plainGalleryRow!: PlainGalleryConfig;
  libConfigPlainGallery = signal<PlainLibConfig | null>(null);

  ngOnInit(): void {
    this.updateLayout(window.innerWidth);
  }

  @HostListener('window:resize', ['$event'])
  onResize(event: Event): void {
    const width = (event.target as Window).innerWidth;
    this.updateLayout(width);
  }

  private updateLayout(width: number): void {
    let layoutWidth = '200px';
    let layoutHeight = '200px';
    let length = 4; // Default: all images in one row

    if (width < 768) { // Small screens
      layoutWidth = '150px';
      layoutHeight = '150px';
      length = 2; // Two images per row
    }

    this.plainGalleryRow = {
      strategy: PlainGalleryStrategy.GRID,
      layout: new GridLayout(
        { width: layoutWidth, height: layoutHeight },
        { length, wrap: true }
      )
    };

    this.libConfigPlainGallery.set({
      plainGalleryConfig: this.plainGalleryRow
    });
  }

  onShow(id: number, index: number, images: Image[] = this.imageData): void {
    const dialogRef: ModalGalleryRef = this.modalGalleryService.open({
      id,
      images,
      currentImage: images[index]
    }) as ModalGalleryRef;
  }
}

  <ks-plain-gallery [id]="200" [images]="imageData" [config]="libConfigPlainGallery()"
    (clickImage)="onShow(200, $event)"></ks-plain-gallery>

[Ks89]

I investigated last year, but probably I forgot to answer to Dea1100. That code is commented because the config change for carousel is disabled. It's very hard to make It work. I'm open to contributions.

About your question, @StefanKern, i didn't implement advanced feature to PlainGalleryComponent because it's a small component to cover a very basic usage, but you can build your own grid very easely and call the modalgallery service by yourself. I created modalgallery service to simplify custom plain galleries.
There Is also an example of a full custom plain gallery in the example folder, if I remember correctly.
However I created a task with your suggestion, because It would be cool to have both carousel and plain gallery components reacting to config changes.