Set focus on an input that is in a nested for loop when a button is clicked

I have a nested for loop and I want to have a hidden input that is only shown when a button is clicked, I also then want the input that is shown to get focus and the keyboard to show. Is there anyway to achieve this?

So far I have the following HTML:

 <ion-list class="checklists">
    <div class="checklist" *ngFor="let checklist of checklists">

      <div class="checklistItem" *ngFor="let item of checklist.ChecklistItems">
            <ion-col class="checkboxCol">
              <ion-item text-wrap no-padding no-lines>
                <ion-checkbox [(ngModel)]="item.Checked"></ion-checkbox>
            <ion-col class="addNoteCol">
              <button ion-button clear (click)="addNote(checklist, item)">Add note</button>
          <ion-row *ngIf="item.ShowNotes" class="notesRow">
              <ion-item no-padding no-lines>
                <ion-input [(ngModel)]="item.Notes" placeholder="Notes"></ion-input>


I have the following in my controller which shows the correct input when the “Add notes” button is clicked but I do not know how to get it to then focus on that input:

    addNote(checklist, item) {

      // Get checklist
      var checklistToEdit = _.find(this.checklists, { Id: checklist.Id });

      // Get checklist item
      var itemToEdit = _.find(checklistToEdit.ChecklistItems, { Id: item.Id });

      itemToEdit.ShowNotes = true;


Can anyone help with this situation? Is this even possible?