Focus on newly added input element

Take a look at ViewChild, here's a example. This might be what you're looking for:

import {Component, ViewChild} from 'angular2/core'

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <input #name>
    </div>
  `,
  directives: []
})
export class App {

  @ViewChild('name') vc: ElementRef;

  ngAfterViewInit() {
    this.vc.nativeElement.focus();
  }
}

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 ngFor so angular2 adds the new input instead of doing it myself. The main purpose is just to make angular2 to iterate over it.
  • Instead of ViewChild I'm going to use ViewChildren that returns a QueryList which has a changes property. 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 @ViewChildren and subscribing to it I made a Directive that will be instatiated everytime a new input is created
  • I'm using Renderer to make it WebWorker safe. The original answer accesses focus() directly on the nativeElement which is discouraged.
  • Now I listen to keydown.enter which simplifies the key down event, I don't have to check which value.

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();

With inline angular code, focus after conditional paint:

  <span *ngIf="editId==item.id">
    <input #taskEditText type="text" [(ngModel)]="editTask" (keydown.enter)="save()" (keydown.esc)="saveCancel()"/>
    <button (click)="save()">Save</button>
    <button (click)="saveCancel()">Cancel</button>
    {{taskEditText.focus()}}
  </span>

Tags:

Angular

Recent Posts