title: How to select dom element in a loop in angular 5
body: <p>I am a newbie in angular and just learning it day by day. I am making a crud in angular 5 and it is going good. I am just stuck in a little problem which I can solve using jquery but I want to solve it in angular way.</p>
  
  <p>This is my crud </p>
  
  <p><a href="https://i.stack.imgur.com/c8gqH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/c8gqH.png" alt="enter image description here"></a></p>
  
  <p>The input box is disabled by default what i want is that when I click on "Edit" it should enable and I need to enable only the adjacent input not all.</p>
  
  <p>This is what I have tried so far.</p>
  
  <p>home.component.html</p>
  
  <pre><code>&lt;div class="container color-dark"&gt;
    &lt;div class="col"&gt;
      &lt;p&gt;Add a bucket list item&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="col"&gt;
      &lt;p&gt;Your bucket list ({{itemscount}})&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="container color-light"&gt;
    &lt;div class="col"&gt;
      &lt;p class="sm"&gt;Use this form below to add a new bucket list goal. What do you want to accomplish in your life?&lt;/p&gt;
  
      &lt;form&gt;
        &lt;input type="text" class="txt" name="item" placeholder="{{goalText}}" [(ngModel)]="goalText"&gt;
        &lt;br&gt;&lt;span&gt;{{ goalText }}&lt;/span&gt;&lt;br&gt;
        &lt;input type="submit" class="btn" [value]="btnText" (click)="additem()"&gt;
      &lt;/form&gt;
    &lt;/div&gt;
    &lt;div class="col"&gt;
      &lt;p class="life-container" *ngFor = "let goal of goals; let i = index" &gt;
        &lt;input type="text"  value=" {{ goal }}" [disabled]="editable" #goalInput&gt;
        &lt;span class="edit_btn" (click)="edititem(i)"&gt;{{edit_btn_txt}}&lt;/span&gt;
        &lt;span class="delete_btn" (click)="removeitem(i)"&gt;Delete&lt;/span&gt;
      &lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is my typescript file code</p>
  
  <pre><code>import { Component, ViewChild, AfterViewInit, ElementRef, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.scss']
  })
  export class HomeComponent implements OnInit {
  
      itemscount:Number = 0;
      btnText:string="Add an Item";
      goalText:string = "";
      goals = ['My First Goal'];
      editable:Boolean = true;
      edit_btn_txt:string = "Edit";
      constructor() { }
  
      ngOnInit() {
  
      }
  
      @ViewChild('goalInput') pizzaInput: ElementRef;
  
      additem(){
          this.goals.push(this.goalText);
          this.goalText='';
          this.itemscount = this.goals.length;
      }
  
  
      ngAfterViewInit() {
          //console.log(this.extraIngredient); // tomato
  
      }
      edititem(i){
          this.pizzaInput.nativeElement.disabled = false;
      }
  
      removeitem(i){
          this.goals.splice(i,1);
          this.itemscount = this.goals.length;
      }
  }
  </code></pre>
  
  <p>When I click on the edit button the first box is enabled for writing but it is working for one time. It is not working for other boxes. How can I handle this problem ?</p>
  
  <p>Thanks in advance.</p>