title: How to make a Textbox editable on click and add a button to the side Angular
body: <p>I am trying to add a feature just like stack overflow comments where clicking on the edit link the div transforms to a text box and we get a submit button .</p>
  
  <p>But the problem is i have multiple comments which i am populating via ngFor how do i remove the property readonly from the selected div in which the edit has been clicked .</p>
  
  <p>This is what i have tried.</p>
  
  <pre><code>    &lt;div class="tab-content"&gt;
          &lt;div id="email" class="tab-pane active"&gt;
              &lt;div *ngFor="let i of comments; let index = index" [@flyInOut]&gt;
                  &lt;div class="well"&gt;
                      &lt;input type=”text” value="{{i.comment}}" [readonly]="false" /&gt;&lt;span&gt;
                          Edited &lt;time&gt;{{today | amDifference: i.createdAt :'minutes'
                              : false}}&lt;/time&gt; before
                      &lt;/span&gt;&lt;a&gt;&lt;i
                          class="align remove glyphicon glyphicon-remove-sign glyphicon-white"
                          (click)="edit(index)"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I also i would love to have something like checking time i have already done the backend part of same how to only enable the edit button for the comment where the amDifference is less than 5 mins and then we show a delete option.</p>