title: How to make a column editable on click Angular 4
body: <p>I am displaying some records in a table using ngFor. I want to make a column editable when it is clicked.</p>
  
  <pre><code>&lt;tr *ngFor="let cd of descriptionCodes; let i = index"&gt;
    &lt;td&gt;&lt;input type="checkbox"&gt;&lt;/td&gt;
    &lt;td&gt;
      {{cd.code}}&gt;
    &lt;/td&gt;
    &lt;td&gt;
      &lt;select class="form-control border-gray" id="codeType" [(ngModel)]="cd.codeType.id" (change)="onCodeTypeChange(i, cd.id)" [ngModelOptions]="{standalone: true}"&gt;
        &lt;option *ngFor="let type of codeTypes" [ngValue]="type.id"&gt;{{type.name}}&lt;/option&gt;
      &lt;/select&gt;
    &lt;/td&gt;
    &lt;td&gt;{{cd.description}}&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>What I want if I click on a particular code then It Should be editable and If I click on any description then it should be editable as well. I also want to make single field editable at a time if I have selected other field then previous field that was edited should not be editable now.</p>
  
  <p>Can anyone please provide me any idea?</p>