feat: detect and handle adding/removing fiv-gallery-image dynamically

[ryaa]

Feature Request

Describe the Feature Request Support adding/removing fiv-gallery-image dynamically in the below use case

          <fiv-gallery #gallery>
            <ion-slides>
              <ion-slide *ngFor="let photoDraft of recipePhotoDrafts">
                <div>
                  <fiv-gallery-image [src]="photoDraft.thumbnailAsBase64"></fiv-gallery-image>
                </div>
              </ion-slide>
            </ion-slides>
          </fiv-gallery>

Right now, new photos/images added are displayed but clicking on them does not open a preview. My assumption is that this is because images QueryList is not subscribed for changes and the fiv-gallery does not take into account if image(s) are added/removed.

Describe Preferred Solution The dynamically added images must support click to open a preview.

Describe Alternatives

Subscribe to images QueryList changes and handle them accordingly. Right now I have to use showGallery flag and toggle it off and on to accomodate the changes but this makes the component to flicker when it is re-rendered.

          <fiv-gallery #gallery *ngIf="showGallery === true">
            <ion-slides>
              <ion-slide *ngFor="let photoDraft of recipePhotoDrafts">
                <div>
                  <fiv-gallery-image [src]="photoDraft.thumbnailAsBase64"></fiv-gallery-image>
                </div>
              </ion-slide>
            </ion-slides>
          </fiv-gallery>

Related Code See above

Additional Context N/A

[ryaa]

Another use case is that the app needs to support deleting an image displayed in the preview. It should remove the image from the preview and who the appropriate images when the preview is dismissed.