Angular 4 template variable focus

Question

I have this cell template that shows the value of an Object into a span element, or, if the row is being editing, shows the value inside an input.

<ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-row="row" let-value="value">
    <span
        *ngIf="!editing[rowIndex]">
        {{value}}
    </span>
    <input
        #myInput
        autofocus
        (blur)="setValue($event, value , row)"
        *ngIf="editing[rowIndex]"
        type="text"
        [value]="value"
    />
</ng-template>

When I click my edit button, I need to focus and select the text. No problem with that. I have

@ViewChild('myInput') myInput;

and

private focusInput(){       
    this.myInput.nativeElement.focus();
    this.myInput.nativeElement.select();
}

The problem is if I need to edit "simultaneously" 2 rows, after clicking the 1st-row edit button, is selected and focused, but when I click the 2nd row's edit button, the 1st input gets the focus again. I think is angular finding the first #myinput element available and focusing them, because, if I click the row number 5 in the first place, it focuses correctly and when any of the previous rows are marked for edit, the behavior is fine.

How can I make this work for each row even when other #myinput are present in the template?

Create a unique angular template reference variable for each input and pass in the one you want to focus to `focusInput`. — Joseph Webber, Jul 23 '18 at 19:40

score 2 · Accepted Answer · answered Jul 24 '18 at 08:23

If you only have 2 inputs in total, I would call the first one #myInput1 and the second #myInput2 and then have two @ViewChilds. Its not clear what calls focusInput, but as @joseph-webber mentioned, you should then pass an index to that call, eg :

private focusInput(index){
    this['myInput' + index].nativeElement.focus();
    this['myInput' + index].nativeElement.select();
}

if you have many inputs, this approach may get messy, so you may need to use ViewChildren instead of ViewChild

View Children was Ok ! Tnk's – federhico Jul 25 '18 at 16:46 — federhico, Jul 25 '18 at 16:46

score 0 · Answer 2 · answered Jul 25 '18 at 12:52

0

You can use @ViewChildren instead, which will return QueryList of matching elements and change their focus as needed.

answered Jul 25 '18 at 12:52

kemsky

14,727
3
32
51

Angular 4 template variable focus

2 Answers2