How to change a MaterialTable Cell content on click? - html

Question

Big Picture
Hi,
I'm trying to use Angular Material in Angular 7.
I have to use a Material table with some data on it. My question is: Is there a way to change a MatCell content on click?
For example, consider the table in HTML above, with people's name, age and phone.
Angular Material Table 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>
What works
Table to diplay data, pagination, filter and sorting headers are working great!
What I need
I want to do is when I click in the phone cell, insted of a text, a <input> tag takes {{person.phone}} place with the current number, allowing me to change the phone number and save the new one.
like this:
Desired MatCell content on click
<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>
Can anyone help me please?

Answer 1

You can use *ngIf with some kind of flag for the selected phone number to swap between the two. So for example, if you have something like this in your component:
selectedPerson:Person;
...you could have something like this in your template:
...
<ng-container matColumnDef="phone">
<mat-header-cell *matHeaderCellDef mat-sort-header>Phone Number</mat-header-cell>
<mat-cell *matCellDef="let person">
<span *ngIf="selectedPerson !== person" (click)="selectedPerson = person">
{{person.phone}}
</span>
<input *ngIf="selectedPerson === person" matInput [value]="person.phone"(focusout)="changePhone($event.target.value, person)" placeholder="Phone">
</mat-cell>
</ng-container>
...