How to sync the two wj-flex-grid row heights according to the content

Question

I have two child components which has wj-flex-grid table and having one parent component in which these two child components are added. I want to sync the row height of both the tables whenever the content of any table row height change other table row height should also align to it.

I was trying to check the rowHeight of both the tables whichever has bigger row height it should set that row height. I found there is one event which is onResizingRow() but not able to use it properly.

Code Example- grid.component.html-

<wj-flex-grid> 
(resizedRow)="onResizedRow($event)"> 
</wj-flex-grid>`

I have added the below line of code in

grid.component.ts-

 onResizedRow(args: CellRangeEventArgs): void {
        this.resizedRow.emit(args);
    }

Parent component html file-

(resizedRow)="onResizedRow($event, 'ageToAge')"

in ts file-

onResizedRow(args: CellRangeEventArgs): void {
        console.log(args);
    }

Child1 component html file added this line in app-grid(which is a grid component)

(resizedRow)="onResizedRow($event)"

in ts file-

 onResizedRow(args: CellRangeEventArgs): void {
        this.resizedRow.emit(args);
    }

I am just consoling it to check whether this method is called or not. It is unfortunately when changing the row it is not calling.

Can anyone provide me any solution for it.

Answer 1

i am not shure that the below example is best approach ,there because it uses the service to talk between these two component but so far this is what i an think of , so try the below.

1st create a service

    import { Injectable } from '@angular/core';
    import { Subject } from 'rxjs';
    
    @Injectable({
      providedIn: 'root'
    })
    export class RowservService{
      private rowHeightSubjectForComp1 = new Subject<number>();
      rowHeightForComp1$ = this.rowHeightSubjectForComp1.asObservable();
    
      private rowHeightSubjectForComp2 = new Subject<number>();
      rowHeightForComp2$ = this.rowHeightSubjectForComp2.asObservable();
    
      updateRowHeight(rowHeight: number,callFromCompX:string) {
       
    
        if(callFromCompX=='callFromComp1'){
            //1 is changes then pass the change to compo2 variable
            this.rowHeightSubjectForComp2.next(rowHeight);
        }else if(callFromCompX=='callFromComp2'){
            //2 is changes then pass the change to compo1 variable
            this.rowHeightSubjectForComp1.next(rowHeight);
    
        }else{
      console.log('var pass is Unhandel look in to it:'+callFromCompX+'?')
    }
  }
}

now in the components implement the below logic as according to your str. (i can't customize as we don't have all the details so if there is any tweak is needed then do it accordingly )

//lets say for compo1
import { Component } from '@angular/core';
import { RowservService } from 'path/to/rowserv.service';

@Component({
  selector: 'app-component1',
  template: `
    <wj-flex-grid [itemsSource]="data" [rowHeight]="rowHeightForComp1$ | async"  (rowHeightChanged)="onRowHeightChanged($event,'callFromComp1')">
      <!-- table content you can pass the parameter to individual/s cells if you need just like above -->
    </wj-flex-grid>
  `
})
export class Component1Component {
  rowHeight$: Observable<number>;

  constructor(private rowservService: RowservService) {}

  ngOnInit() {
    this.rowHeight$ = this.rowservService.rowHeightForComp1$;
  }

  onRowHeightChanged(rowHeight: number,callFromCompX:string) {
    this.rowservService.updateRowHeight(rowHeight,callFromCompX);
  }
}

for 2nd component follow the below

//lets say for compo2
import { Component, OnInit } from '@angular/core';
import { RowservService } from 'path/to/rowserv.service';

@Component({
  selector: 'app-component2',
  template: `
    <wj-flex-grid [itemsSource]="data" [rowHeight]="rowHeight$ | async" (rowHeightChanged)="onRowHeightChanged($event,'callFromComp2')" >
      <!-- table content -->
    </wj-flex-grid>
  `
})
export class Component2Component implements OnInit {
  rowHeight$: Observable<number>;

  constructor(private rowservService: RowservService) {}

  ngOnInit() {
    this.rowHeight$ = this.rowservService.rowHeightForComp1$;
  }

  onRowHeightChanged(rowHeight: number,callFromCompX:string) {
    this.rowservService.updateRowHeight(rowHeight,callFromCompX);
  }
}

as i did not run it by my self,so i need you to verify the results ,so that i can fix any if needed.