Angular2 - Focusing a textbox on component load

angular angular2-template angular2-forms
parag picture parag · Mar 4, 2016 · Viewed 123.4k times · Source

I am developing a component in Angular2 (Beta 8). The component has a textbox and a dropdown. I would like to set the focus in textbox as soon as component is loaded or on change event of dropdown. How would I achieve this in angular2. Following is Html for the component.

Answer

Nikhil Nambiar picture Nikhil Nambiar · Feb 3, 2017

Using simple autofocus HTML5 attribute works for 'on load' scenario

 <input autofocus placeholder="enter text" [(ngModel)]="test">

or 

<button autofocus (click)="submit()">Submit</button>

http://www.w3schools.com/TAgs/att_input_autofocus.asp

Related questions

Angular2 disable button

I know that in angular2 I can disable a button with the [disable] attribute, for example: <button [disabled]="!isValid" (click)="onConfirm()">Confirm</button> but can I do it using [ngClass] or [ngStyle] ? Like so: <button […

Read More
Angular 2: Can't bind to 'ngModel' since it isn't a known property of 'input'

I'm trying to implement Dynamic Forms in Angular 2. I've added additional functionalities like Delete and Cancel to the dynamic forms. I've followed this documentation: https://angular.io/docs/ts/latest/cookbook/dynamic-form.html I've made some changes to the code. …

Read More
How to convert input value to uppercase in angular 2 (value passing to ngControl)

I am trying to validate the input fields using ngControl's value in angular 2. i need to validate that the user enters the value in upper case always. Now we need to convert the value entered by user to uppercase. But …

Read More