How to access a mat-table element in ComponentA from ComponentB

Question

A Visual Studio 2019 project with an Angular 12 UI.

All of the code was originally in CompA of the UI, specifically there was a mat-table:

<table mat-table #myTable>

as well as a click event on the table rows, so that when a row is clicked, its background color changed to yellow:

   ...
  <mat-row *matRowDef="let row; columns: myColumns;" (click)="setRowColor($event)"></mat-row>
</table>

In the ts file, I have a ViewChild to the table:

@ViewChild('myTable', { static: true }) myTableVar: MatTable<any>

plus code to handle setting/clearing the background color:

  setRowColor(ev: Event) {
    let el: HTMLElement = ev.currentTarget as HTMLElement;
    if (el.style.backgroundColor === 'yellow')
      el.style.backgroundColor = '';
    else
      el.style.backgroundColor = 'yellow';
  }

There is also a button on CompA that when clicked, will cycle through all rows in the table, processing any row that had a background color of yellow, and then clearing the background color for the row:

processRowsInMatTable() {
    const el: HTMLElement[] = this.myTableVar._getRenderedRows(this.myTableVar._rowOutlet);
    el.forEach(e => {
      const eHtml: HTMLElement = e as HTMLElement;
      if (eHtml.style.backgroundColor === 'yellow') {
        //some processing;
        eHtml.style.backgroundColor = '';
      }
    });
  }

Everything was working as expected. However as CompA was getting too large, CompB was created, and the button that would cycle through all the rows in the mat-table is now in CompB. How can I get a reference to CompA.myTable in CompB, so that I can perform the logic in method processRowsInMatTable (which is also in CompB now)? Also, there is no parent/child relationship between A and B.

could you show your CompA and CompB code and how they are rendered and related. — Mehyar Sawas, Dec 07 '21 at 22:08
What's the structure of these 2 components? Are they nested or siblings? — Babis.amas, Dec 07 '21 at 22:08
@barnumBailey You should check how `EventEmitter` works so that you can emit an event from the one component and pass the value into the second one. — Babis.amas, Dec 07 '21 at 22:24
@BarnumBailey check this post, It should help you https://stackoverflow.com/questions/35685801/angular-2-event-catching-between-sibling-components — Babis.amas, Dec 07 '21 at 22:27
I do use event emitter when someone double clicks on a mat-table row, I didn't show that code. I've thought of possibly using an event emit when a user single clicks on a row. While I could do something like store off the data from the single row click, I'm left with the problem of clearing the row background color after processing. — BarnumBailey, Dec 07 '21 at 22:28

How to access a mat-table element in ComponentA from ComponentB

0 Answers0