How to set focus on input field automatically on page load in AngularJS ? - GeeksforGeeks

03 Jun, 2021
We can focus on any input field automatically using the angular directives. Here we create a custom directive that can auto-focus on any field in the form.
Creating a custom directive is just like creating an Angular component. To create a custom directive we have to replace @Component decorator with @Directive decorator.
Approach :
Create the Angular app to be used.
Create a directive “AutoFocus” that handles the auto-focus of input fields. In this directive set the HTML element as focused.
Then import this directive inside app.module.ts and add it to the provider’s list.
Create a simple form on which we set the input field as focused on page reload. So we have created a signup form with two input fields “email” and “password” and add the directive “autofocus” to the “email” input field and then this field is auto-focus on page reload.
Syntax: Below “autofocus” inside the input field is a directive to auto-focus this input field.
<input autofocus type="email" name="email" #email="ngModel" ngModel />
So let’s create our simple custom directive “AutoFocus” that handles the input field auto-focus.
auto-focus.directive.ts
import {AfterViewInit, Directive,ElementRef} from '@angular/core'  @Directive({    selector:'autofocus'})export class AutoFocus implements AfterViewInit{      constructor(        private elementRef: ElementRef    ){}      ngAfterViewInit(){        this.elementRef.nativeElement.focus();    }}
In the above code, we have created a directive “autofocus” here “autofocus” is the name/selector of this directive, and whenever we want to use this directive we have to provide the selector. We are using the angular “ngAfterViewInit” lifecycle hook that makes the element focused after view initialization.
Now we have to make sure that angular knows our newly created directive, so we have to provide it inside “app.module.ts” file.
app.module.ts
import { NgModule } from '@angular/core';  import { AppComponent } from './app.component';import { AutoFocus } from './auth/signup/autofocus.directive';  @NgModule({  declarations: [    AppComponent,    AutoFocus  ],  imports: [],  providers: [],  bootstrap: [AppComponent],})  export class AppModule { }
So here we have provided “AutoFocus” directive inside “declarations” array and make sure to import it as well.
Now we have to create an input field on which we are going to apply this autofocus directive. For this, we have created a simple signup form and in this form user, the email input field is auto-focus on page reload.
signup.component.html
<form (submit)="onSignup(form)" #form="ngForm" >  <mat-card>    <mat-form-field>      <!--         AutoFocus directive applied in the below        input field       -->      <input      autofocus       type="email"       matInput        name="email"       #email="ngModel"       ngModel       />    </mat-form-field>    <mat-form-field>        <input ngModel #password="ngModel" type="password"         matInput placeholder="Password" name="password">    </mat-form-field>    <button      type="submit"      mat-raised-button color="primary">      <span>SignUp</span>    </button>  </mat-card></form>
<input autofocus type="email" matInput 
    name="email" #email="ngModel" ngModel />
So in the above form “autofocus” directive is provided in the email input field and this field is auto-focused on page reload.
Output : 
AngularJS-Directives
AngularJS-Questions
Picked
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Angular PrimeNG Dropdown Component
Auth Guards in Angular 9/10/11
Angular PrimeNG Calendar Component
How to bundle an Angular app for production?
What is AOT and JIT Compiler in Angular ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?