If I’m allowed to do so, I will take part of @Sasxa answer and modify it to make it more like what you’re looking for.
A few changes
- I will use a
ngForso angular2 adds the new input instead of doing it myself. The main purpose is just to make angular2 to iterate over it. - Instead of
ViewChildI’m going to useViewChildrenthat returns a QueryList which has achangesproperty. This property is an Observable and it returns the elements after they’ve changed.
Since in ES5, we have no decorators we have to use the queries property to use ViewChildren
Component
Component({
selector: 'cmp',
template : `
<div>
// We use a variable so we can query the items with it
<input #input (keydown)="add($event)" *ngFor="#input of inputs">
</div>
`,
queries : {
vc : new ng.core.ViewChildren('input')
}
})
Focus on the last element.
ngAfterViewInit: function() {
this.vc.changes.subscribe(elements => {
elements.last.nativeElement.focus();
});
}
Like I said before, ViewChildren returns a QueryList which contains changes property. When we subscribe to it everytime it changes it will return the list of elements. The list elements contains a last property (among others) that in this case returns the last element, we use nativeElement on it and finally focus()
Add input elements This is for pure convenince, the inputs array has no real purpose more than redraw the ngFor.
add: function(key) {
if(key.which == 13) {
// See plnkr for "this.inputs" usage
this.inputs.push(this.inputs.length+1);
}
}
We push a dummy item on the array so it redraws.
Example using ES5 : http://plnkr.co/edit/DvtkfiTjmACVhn5tHGex
Example using ES6/TS : http://plnkr.co/edit/93TgbzfPCTxwvgQru2d0?p=preview
Update 29/03/2016
Time has passed, things have been clarified and there are always best practices to learn/teach. I’ve simplified this answer by changing a few things
- Instead of using
@ViewChildrenand subscribing to it I made a Directive that will be instatiated everytime a new input is created - I’m using
Rendererto make it WebWorker safe. The original answer accessesfocus()directly on thenativeElementwhich is discouraged. - Now I listen to
keydown.enterwhich simplifies the key down event, I don’t have to checkwhichvalue.
To the point. The component looks like (simplified, full code on the plnkrs below)
@Component({
template: `<input (keydown.enter)="add()" *ngFor="#input of inputs">`,
})
add() {
this.inputs.push(this.inputs.length+1);
}
And the directive
@Directive({
selector : 'input'
})
class MyInput {
constructor(public renderer: Renderer, public elementRef: ElementRef) {}
ngOnInit() {
this.renderer.invokeElementMethod(
this.elementRef.nativeElement, 'focus', []);
}
}
As you can see I’m calling invokeElementMethod to trigger focus on the element instead of accessing it directly.
This version is much cleaner and safer than the original one.
plnkrs updated to beta 12
Example using ES5 : http://plnkr.co/edit/EpoJvff8KtwXRnXZJ4Rr
Example using ES6/TS : http://plnkr.co/edit/em18uMUxD84Z3CK53RRe
Update 2018
invokeElementMethod is deprecated. Use Renderer2 instead of Renderer.
Give your element an id, and you can use selectRootElement:
this.renderer2.selectRootElement('#myInput').focus();