Update rxjs from angular material table responsive directive

Question

In this stackblitz demo there's an Angular 12 project that lets you create responsive material tables with expandable rows. you use the "matTableResponsive" directive in the table html tag.

The rxjs version of that project is 6.5.3.

I'm trying to use this code in my project which uses rxjs version 7.5.5 and Angular 14.

I imported everything, tried to use the directive but its simply not working.

I checked the code in "mat-table-responsive.directive.ts" which contains this function:

  ngAfterViewInit() {
    combineLatest([this.theadChanged$, this.tbodyChanged$])
      .pipe(
        mapTo({ headRow: this.thead.rows.item(0)!, bodyRows: this.tbody.rows }),
        map(({ headRow, bodyRows }) => ({
          columnNames: [...headRow.children].map(
            headerCell => headerCell.textContent!
          ),
          rows: [...bodyRows].map(row => [...row.children])
        })),
        takeUntil(this.onDestroy$)
      )
      .subscribe(({ columnNames, rows }) =>
        rows.forEach(rowCells =>
          rowCells.forEach(cell =>
            this.renderer.setAttribute(
              cell,
              'data-column-name',
              columnNames[(cell as HTMLTableCellElement).cellIndex]
            )
          )
        )
      );
  }

This function uses mapTo, which works on rxjs 6.5.3 but its deprecated in version 7.5.5:

I may be wrong but i believe that's the reason why the directive is simply not working on my project.

Can someone help me update this function to work in the latest rxjs version? I know i have to replace mapTo with map as the image recommends, but i dont exactly know how to.

Answer 1

mapTo(true) becomes map(() => true)

mapTo({ headRow: this.thead.rows.item(0)!, bodyRows: this.tbody.rows }), becomes map(() => ({ headRow: this.thead.rows.item(0)!, bodyRows: this.tbody.rows })),