Как развернуть таблицу mat для просмотра полных данных с помощью Angular 6

Question

Я создал mat-table для отображения всех деталей из API. В настольном представлении он работает нормально, но для мобильных устройств я должен показать первые 2 столбца, а в 3-м столбце нужна кнопка, чтобы развернуть и свернуть, чтобы увидеть другие детали в конкретной строке.

Я пробовал во многих отношениях, но это приводит кошибка. Здесь я добавляю код, как я сделал для настольной версии

stockListColumns: string[] = ['serial','rank','companyName','View'];
stockList: any = [];
stockListClone: any = [];
 getStockLists() {
    this._market.getStockList();
    this.stockListSubs = this._market.stockList.subscribe(
      (data: any) => {
        if (data != null) {
          if (data != 'error') {
            this.stockList = []; this.stockListClone = [];
            this.stockList = data;
            this.stockListClone = new MatTableDataSource(data);
            this.stockListClone.sort = this.sort;
          }
        }
      }
    );



<ng-container *ngIf="stockListClone?.length != 0; else noDataFound">
                        <table mat-table [dataSource]="stockListClone" matSort matSortActive="volume" matSortDirection="desc"
                          matSortDisableClear>
                          <ng-container matColumnDef="serial">
                            <th mat-header-cell *matHeaderCellDef> Rank </th>
                            <td mat-cell *matCellDef="let i = index">
                              {{i+1}}
                            </td>
                          </ng-container>

                          <ng-container matColumnDef="rank">
                              <th mat-header-cell *matHeaderCellDef mat-sort-header> </th>
                              <td mat-cell *matCellDef="let stock; let i = index">
                                  <a *ngIf="userDetails != ''" href="javascript:void(0)" class="favorite_icon" (click)="toggleFavorites(stock,i)">
                                      <i class="fa-star" [ngClass]="{'fal': !stock.isFavourite,'fas': stock.isFavourite}"></i>
                                    </a> 
                              </td>
                            </ng-container>

                            <ng-container matColumnDef="companyName">
                              <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
                              <td mat-cell *matCellDef="let stock; let i = index">
                                <a href="javascript:void(0)" class="link_black" title="{{stock.companyName}}" (click)="navToMarketInfo(stock)">
                                  {{(stock.companyName.length > 16) ? ( stock.companyName | slice:0:16 ) + '...' :(stock.companyName)}}
                                </a>
                              </td>
                            </ng-container>

                            <ng-container matColumnDef="View">
                                <th class="text-right" mat-header-cell *matHeaderCellDef></th>
                                <td class="text-right market_expand" mat-cell *matCellDef="let stock; let i = index">
                                  <a [ngClass]="toggle[i] ? 'hide_link': 'view_link'" href="javascript:void(0)" (click)="toggle[i] = !toggle[i]">
                                    <i class="fa" [ngClass]="toggle[i] ? 'fa-angle-down': 'fa-angle-right'"></i> 
                                  </a>
                                </td>
                            </ng-container>


                        <tr mat-header-row *matHeaderRowDef="stockListColumns"></tr>
                        <tr mat-row *matRowDef="let row; let odd = odd; columns: stockListColumns;" [ngClass]="{'alternate_row': odd }"></tr>


                        </table>
                      </ng-container>

                      <ng-template #noDataFound>
                        <table class="mat-table">
                            <thead>
                                <tr class="mat-header-row">
                                    <th class="mat-header-cell"> Rank </th>
                                    <th class="mat-header-cell"></th>
                                    <th class="mat-header-cell">
                                        Name 
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                              <tr>
                                <td colspan="10" class="mat-cell tbl_no_data_found text-center">
                                  No Data Found
                                </td>
                              </tr>
                            </tbody>
                        </table>
                      </ng-template>

Можно ли расширить строку? в этом шаблоне я могу сделать? Пожалуйста, помогите сделать. Заранее спасибо