Get the html structure (or template) of the element's directive

I have a component with the following HTML structure:

<table mat-table
       [dataSource]="rowItems"
       appResponsiveTable>

  <ng-container matColumnDef="itemName">
    <th mat-header-cell
        *matHeaderCellDef> </th>
    <td mat-cell
        *matCellDef="let element"> {{ element.itemName }} </td>
  </ng-container>

  <tr mat-header-row
      *matHeaderRowDef="displayedColumns; sticky: true"></tr>
  <tr mat-row
      *matRowDef="let element; columns: displayedColumns;">
  </tr>


</table>

and I have my directive appResponsiveTable (nothing in that directive at the moment).

I want to access the structure/template of the element that the directive is on (table in this case).

The reason why I want it is to be able to create dynamically that table with the same structure but different dataSource and be able to calculate the size of the columns with the new dataSource. This is for responsiveness purpose (as you can understand from the name of the directive). I want to know which columns are causing the table to overflow but I don't want to add them to the current table and then check if it's ok and act based on that, instead I want to do that in the "side".