javascript - 要素のディレクティブのHTML構造（またはテンプレート）を取得する

次のHTML構造を持つコンポーネントがあります：

<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>

そして、私は自分のディレクティブ appResponsiveTable を持っています（現時点ではそのディレクティブには何もありません）。

私はディレクティブが適用されている要素（この場合はテーブル）の構造／テンプレートにアクセスしたいです。

私がそれを望む理由は、同じ構造で異なるデータソースを持つテーブルを動的に作成し、新しいデータソースで列のサイズを計算できるようにするためです。これはレスポンシブ対応のためです（ディレクティブの名前からもわかるように）。どの列がテーブルのはみ出しを引き起こしているのかを知りたいのですが、現在のテーブルにそれらを追加して、それが問題ないか確認してから対応するのではなく、"サイド"でそれを行いたいのです。