Большая фотография

Привет, Я пытаюсь использовать Angular Material в Angular 7. Я должен использовать таблицу материалов с некоторыми данными. Мой вопрос: есть ли способ изменить содержимое MatCell по щелчку? Например, рассмотрим приведенную выше HTML-таблицу с именами людей, возрастом и телефонами.

Таблица материалов Angular HTML

<mat-form-field>
    <input matInput (keyup) = "applyFilter($event.target.value)" placeholder = "Phone">
</mat-form-field>

<mat-table [dataSource] = "dataSource" class = "mat-elevation-z8" matSort >
      
    <ng-container matColumnDef = "name">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
        <mat-cell *matCellDef = "let person" >{{person.name}}</mat-cell>
    </ng-container>
      
    <ng-container matColumnDef = "age">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Age</mat-header-cell>
        <mat-cell *matCellDef = "let person">{{person.age}}</mat-cell>
    </ng-container>
      
    <ng-container matColumnDef = "phone">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Phone Number</mat-header-cell>
        <mat-cell *matCellDef = "let person">{{person.phone}}</mat-cell>
    </ng-container>

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

</mat-table>
<mat-paginator [length] = "100" [pageSize] = "5" [pageSizeOptions] = "[5, 10, 25, 100]"></mat-paginator>

Что работает

Таблица для отображения данных, нумерация страниц, фильтрация и сортировка заголовков работают отлично!

Что мне нужно

Я хочу сделать это когда я нажимаю в ячейке телефона вместо текста, тег <input> занимает место {{person.phone}} с текущим номером, что позволит мне изменить номер телефона и сохранить новый. нравится:

Желаемый контент MatCell по клику

<ng-container matColumnDef = "phone">
    <mat-header-cell *matHeaderCellDef mat-sort-header>Phone Number</mat-header-cell>
    <mat-cell *matCellDef = "let person">
        <input matInput [value] = "person.phone"(focusout) = "changePhone($event.target.value, person)" placeholder = "Phone">
    </mat-cell>
</ng-container>

Кто-нибудь может мне помочь?