html - how to make selected row editable on click of edit button In angular 4 -

i have table select , select check box , want make selected row editable on select , click of edit button.

<tbody>   <tr *ngfor='let row of rowdata'>     <td class="text-center">       <input type="checkbox" />     </td>     <td>{{row.name}}</td>     <td>{{row.email}}</td>     <td>{{row.remark}}</td>     <td>{{row.test1}}</td>     <td>{{row.test2}}</td>     <td>{{row.test3}}</td>     <td>{{row.test4}}</td>     <td>{{row.test5 }}</td>     <td>{{row.test6 }}</td>   </tr> </tbody> 

you should add property rowdata, such editable. layout code this:

<tbody>         <tr *ngfor='let row of rowdata' [ngclass]="{ 'selected': row.selected }">           <td class="text-center>               <input type="checkbox" [(ngmodel)]="row.selected" />           </td>           <td>              <input type="text" *ngif="row.editable" [(ngmodel)]="row.name" />              <ng-container *ngif="!row.editable">{{row.name}}</ng-container>              <!-- can use span or whatever instead of ng-container-->           </td>           <!-- repeat other cells -->               </tr>       </tbody> 

for select part, assume have checkbox in thead. needs have code:

<td><input type="checkbox" (change)="selectall($event)" /></td> 

then in component:

    selectall(event) {         if (event.target.checked) {             this.rowdata = this.rowdata.map((row) => {                row.selected = true;                return row;             });         } else {             this.rowdata = this.rowdata.map((row) => {                row.selected = false;                return row;             });         }     } 

then must have edit button above table takes selected rows , makes them editable.

makeeditable() {   this.rowdata = this.rowdata.map((row) => {      if (row.selected) { row.editable = true; }      else { row.editable = false; }      return row;   }); } 

call on edit button click.