Recalculate ngx-datatable on Click Event from another Directive

Question

I have a Side Navigation with a docking feature and a data table in Main View. Upon un-docking the side navigation, the data table in Main View does not recalculate (this will leave some empty space that the Side Navigation came from) so I need to recalculate manually upon click. However, problem lies in the fact that the Side Navigation and Data Table are two different directives.

I have multiple modules with different data table names

Answer 1

I made it using MutationObserver<\/code> which tracks style change for left menu and sets DatatableComponent<\/code> width.

import { Directive, ElementRef, Host, OnDestroy, Self } from '@angular/core';
import { DatatableComponent } from '@swimlane/ngx-datatable';

@Directive({ selector: '[sidePanelToggle]' })
export class SidePanelToggleDirective implements OnDestroy {
  private changes: MutationObserver;
  wasVisible: boolean | undefined;

  constructor(
    private elementRef: ElementRef,
    @Host() @Self() private tableComponent: DatatableComponent
  ) {
    const tableElement = this.elementRef.nativeElement as HTMLElement;

    this.changes = new MutationObserver((mutations: MutationRecord[]) => {
        mutations.forEach((mutation: MutationRecord) => {
            const sideNavElement = mutation.target as HTMLElement;
            const isVisible = sideNavElement?.style.visibility === 'visible';
            if (this.wasVisible !== undefined) {
                if (this.wasVisible && !isVisible || !this.wasVisible && isVisible) {
                  if (tableElement.style.width) {
                    tableElement.style.width = `${tableElement.offsetWidth + (isVisible ? -sideNavElement.offsetWidth : sideNavElement.offsetWidth)}px`;
                  }
                  else if (isVisible) {
                    tableElement.style.width = `${tableElement.offsetWidth - sideNavElement.offsetWidth}px`;
                  }
                  this.tableComponent.recalculate();
                }
            }
            this.wasVisible = isVisible;
        });
    });

    document.querySelectorAll('mat-sidenav').forEach(element => {
      this.changes.observe(element, { attributeFilter: ['style'] });
    });
  }

  private static floatOrZero(value: any) {
    const result = parseFloat(value);
    return isNaN(result) ? 0 : result;
  }

  ngOnDestroy(): void {
    this.changes.disconnect();
  }
}