import { Directive, ElementRef, AfterViewInit, Input, HostListener, OnDestroy, QueryList, ContentChildren } from '@angular/core';
import { debounceTime } from 'rxjs/operators';
import { fromEvent, Subscription } from 'rxjs';

@Directive({
  selector: '[pyb-button-group]'
})
export class ButtonGroupDirective implements AfterViewInit, OnDestroy {
  @Input() className: string;
  @ContentChildren('header', { read: ElementRef }) headers: QueryList<ElementRef>

  private eventSubscription: Subscription

  @HostListener('window:resize', ['$event'])
  onResize() {
    this.eventSubscription = fromEvent(window, 'resize')
      .pipe(debounceTime(500))
      .subscribe(() => this.resize());
  }

  ngAfterViewInit() {
    this.resize();
  }

  ngOnDestroy() {
    if (this.eventSubscription) this.eventSubscription.unsubscribe();
  }

  resize(): void {
    let headerHeight = 0;

    this.headers.forEach(header => {
      let element = header.nativeElement;
      element.style.height = 'auto'; // Reset when resizing the window

      let height = element.offsetHeight;
      if (height > headerHeight) headerHeight = height;
    });

    this.headers.forEach(header => {
      let element = header.nativeElement;
      element.style.height = headerHeight ? headerHeight + 'px' : 'auto';
    });
  }
}

<div class="container" *ngIf="categories">
  <div class="row" pyb-button-group>
    <div class="col-md-4 col-6" *ngFor="let category of categories">
      <a class="btn-choice" [routerLink]="['/' + category.id]">
        <div class="header" #header>
          <span class="title">{{ category.name }}</span>
        </div>
      </a>
    </div>
  </div>
</div>