Я хочу добавить выпадающее меню в мою программу angular 8 и прикрепить разные таблицы в качестве значений к различным параметрам

Question

У меня есть 2 варианта для раскрывающегося списка Роль и Привилегия.

<mat-form-field>
  <mat-label></mat-label>
  <select matNativeControl required>
    <option value="">Role</option>
    <option value="Privilege">Privilege</option>
  </select>
</mat-form-field>

Я хочу показать две разные таблицы. Один, когда я выбираю Роль, и другой, когда я выбираю Привилегию.
Как мне сделать это в Angular 8, используя HTML?
Прикрепление кода для одной из таблиц, а затем добавить код для другой таблицы когда в раскрывающемся списке выбрана привилегия опции

<h4>Duty Role</h4> 
<div class="table-container">
  <table id='data-table' mat-table [dataSource]="dataSource2"  border=1>
    <ng-container  matColumnDef="subRoleName">
      <th id="col1" mat-header-cell *matHeaderCellDef> Sub Role Name </th>
      <td  id="col1" mat-cell *matCellDef="let element"> {{element.subRoleName}} </td>
    </ng-container>

    <ng-container id="col2" matColumnDef="subRoleCode">
      <th mat-header-cell *matHeaderCellDef>Sub Role Code </th>
      <td mat-cell *matCellDef="let element"> {{element.subRoleCode}} </td>
    </ng-container>

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

    <ng-container id="col4" matColumnDef="inheritedByRoleName">
      <th mat-header-cell *matHeaderCellDef> Inherited by Role Name </th>
      <td mat-cell *matCellDef="let element">{{element.inheritedByRoleName }}</td>
    </ng-container>

    <ng-container id="col5" matColumnDef="inheritedByRoleCode">
      <th mat-header-cell *matHeaderCellDef> Inherited by Role Code </th>
      <td mat-cell *matCellDef="let element">{{element.inheritedByRoleCode}}  </td>
     </ng-container>

     <tr mat-header-row *matHeaderRowDef="displayColumns1; sticky: true;" style="height:25px;"></tr>
     <tr mat-row *matRowDef="let row; columns: displayColumns1;"></tr>
  </table>
</div>

Я хочу, чтобы эта таблица отображалась при выборе опции роли из выпадающего списка.