title: Edit table row inline on click of edit in Angular
body: <p>I have a table where data is populating. Each row has an edit link. I want to edit only a particular row on click of edit link. Right now its' showing edit option for all the rows.</p>
  
  <p>Also I want to show the text in a input box on click of edit.</p>
  
  <p>Here is my code.</p>
  
  <pre><code>&lt;tr *ngFor="let row of backendData.report"  class="hover-highlight"&gt;
  
            &lt;td class="benchmark_name"&gt;
               {{row.name}}
            &lt;/td&gt;
            &lt;td&gt;
              {{row.value}}
            &lt;/td&gt;
            &lt;td&gt;
              {{row.description}}
            &lt;/td&gt;
            &lt;td&gt;
                &lt;button *ngIf="enableEdit" (click)="enableEdit=false" class="btn page-secondary-action-btn" ng-click="cancel()"&gt;Cancel&lt;/button&gt;
                &lt;button *ngIf="enableEdit" id="saveBtn" class="btn page-primary-action-btn" (click)="saveSegment()" type="submit"&gt;Save&lt;/button&gt;
                &lt;a class="table-row-action edit-action" *ngIf="!enableEdit" (click)="enableEdit = true"&gt;
            &lt;i class="fa fa-pencil" uib-tooltip="Edit" tooltip-trigger="mouseenter" tooltip-append-to-body="true" tooltip-placement="left"&gt;&lt;/i&gt;
          &lt;/a&gt;
            &lt;/td&gt;
            &lt;td&gt;
  
            &lt;/td&gt;
          &lt;/tr&gt;
  </code></pre>
  
  <p>My current output looks like this </p>
  
  <p><a href="https://i.stack.imgur.com/nvlOz.png" rel="noreferrer"><img src="https://i.stack.imgur.com/nvlOz.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/9ughP.png" rel="noreferrer"><img src="https://i.stack.imgur.com/9ughP.png" alt="enter image description here"></a></p>