Gallery auto height (DEPRECATED DOC)

This is an old documentation for an older version, autoHeight feature is a built-in option in the gallery.

While the auto-height is not a feature of this plugin, it can still be accomplished by setting the height of the gallery manually.

Assume you display text inside each image, you can use the (indexChange) output to set the gallery height manually by adding the height of active text element

<gallery [items]="items"
         [itemTemplate]="itemTemplate"
         (indexChange)="setDynamicHeight($event)"></gallery>

<!-- Custom template to show text -->
<ng-template #itemTemplate
             let-index="index"
             let-type="type"
             let-data="data"
             let-currIndex="currIndex">
  <div *ngIf="index === currIndex"
	id="item-text-{{ index }}"
	class="item-text">
    {{data?.text}}
  </div>
</ng-template>

export class AutoHeightExample {
  
  @ViewChild(GalleryComponent, { read: ElementRef }) galleryCmp: ElementRef;

  ngOnInit() {
    // Set the height manually on gallery init
    this.setDynamicHeight({ currIndex: 0 });
  }

  setDynamicHeight(state: GalleryState) {
    requestAnimationFrame(() => {
      // Get the text element height
      const textHeight = document.querySelector(`#item-text-${state.currIndex}`).clientHeight;
      const galleryElement: HTMLElement = this.galleryCmp.nativeElement;
      galleryElement.style.height = `${textHeight + 200}px`;
    });
  }
}

See Auto-height stackblitz example