how to make the focus on the different text boxes in angular 2

Question

I have more than 25 text boxes and I need to make the focus on each text boxes based on the user input.

But I don't want to make 25 different reference variables in my HTML also it will affect my angular code being more length.

I am using template

<input type="text" [(ngModel)]="textVal" #textValue>

and my class I used

@ViewChild('textValue') textValue;

this.textValue.nativeElement.focus();

So my question is can I need to create 25 reference variables and 25 view child variables

can anybody give some suggestions??

Are your 25 inputs static or generated with ngFor? – alcfeoh Feb 08 '18 at 18:39 — alcfeoh, Feb 08 '18 at 18:39

score 0 · Accepted Answer · answered Feb 08 '18 at 18:47

0

A possible solution is to use @ViewChildren in your component:

@ViewChildren('input[type=text]')
allInputs;

That way you can set the focus on any of those inputs based on your business logic. No need to use reference variables anymore.

answered Feb 08 '18 at 18:47

alcfeoh

How can I make focus in a specific field with allInputs variable – shajan Feb 09 '18 at 15:10
allInputs is a QueryList object, which can be iterated upon: https://angular.io/api/core/QueryList – alcfeoh Feb 14 '18 at 00:00

1 Answers1