import { Component, Input, ChangeDetectionStrategy, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Component({
    selector: 'app-synced-grids',
    template: `
    <app-grid-sync [gridDataChanged]="dataChange$ | async">
        <app-my-data-grid
            *ngFor="let gridDataSet of dataSet; last as isLast"
            [data]="gridDataSet"
            [hideScrollbar]="!isLast">
        </app-my-data-grid>
    </app-grid-sync>
  `,
    changeDetection: ChangeDetectionStrategy.OnPush,
    encapsulation: ViewEncapsulation.None, //example css, I actually have this on the "app-my-data-grid" referenced above
    styles: [`
        app-my-data-grid .hide-scrollbar > * {
            margin-right: -7px; /* I simply have the grids slightly overlap to hide the extra scrollbars */
        }
    `]
})
export class ExampleSyncedGridsComponent implements OnChanges {
    @Input() dataSet: any[]; //your data set type
    public dataChange$ = new BehaviorSubject<boolean>(true);

    constructor() { }

    ngOnChanges(changes: SimpleChanges): void {
        if (changes["dataSet"] && this.dataSet?.length > 0) {
            this.dataChange$.next(true);
        }
    }
}