need to focus the particular input while click the button

Question

I create an 9 input with corresponding 9 buttons in ngFor I need to focus the input when click the corresponding button.I attached the code for your reference

I already acheive this through document.getElement But I need to acheive this in angular way.

<div (window:resize)="myfunction($event)" >
  <div class="row"  *ngFor="let her of heroes;let i=index">
    <div class="col-sm-3">{{her.name}}</div>
    <div class="col-sm-3">
      <input  id={{i}} #ref class="grid inborder" #validation1 type="text" (keydown)="chng($event.target.value)" >
    </div>
    <div class="col-sm-3">
      <button class="editCLs" (click)="edit1(i)">{{her.edit}}</button>
    </div>
  </div>
</div>

I acheived this through below code

edit1(ej) {

    document.getElementById(ej).focus();
    //this.ref.nativeElement.getElementById(ej).focus();
  }

But I need to acheive through angular way.

I need to focus the corresponding input while click the button.Please refer this link

Please share If spark any idea. Thanks in Advance

Take a look at [this answer](https://stackoverflow.com/a/55748075/1009922). — ConnorsFan, Jun 03 '19 at 13:21

score 0 · Answer 1 · answered Jun 03 '19 at 13:38

0

I would do it like this.

 @ViewChildren("input") inputs: QueryList<any>

edit1(ej) {
    this.inputs[i].nativeElement.focus();
  }

answered Jun 03 '19 at 13:38

hunterTR

190
6

need to focus the particular input while click the button

1 Answers1