Open In App
Related Articles

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

Improve Article
Save Article
Like Article

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.



import {AfterViewInit, Directive,ElementRef} from '@angular/core'
export class AutoFocus implements AfterViewInit{
        private elementRef: ElementRef

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.


import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AutoFocus } from './auth/signup/autofocus.directive';
  declarations: [
  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.


<form (submit)="onSignup(form)" #form="ngForm" >
        AutoFocus directive applied in the below
        input field
        <input ngModel #password="ngModel" type="password" 
        matInput placeholder="Password" name="password">
      mat-raised-button color="primary">

<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 : 

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 03 Jun, 2021
Like Article
Save Article
Similar Reads
Complete Tutorials