How to Create Autofocus Directive Certain Elements Angular 4

Example autofocus directive angular 4. In Angular, using autofocus attribute unlike html5/javascript code in general. You need to create a directive first so that the code work well. This short tutorial I will share how to build and use autofocus directive in angular 4. Let’s see.

Read another article: Simple Login Form Angular 4 Tutorial For Beginner

What is auto focus attribute?

Autofocus Directive Angular 4 Tutorial Free Min

According to, the autofocus attribute html5 is a boolean attribute. How it works is when the page loaded, then automatically focus on element. The use of the html5 autofocus attribute is as follows.

The problem is when you move the one to another pages using the angular router on single page application. Autofocus html5 only runs when the first time page loads. Unlike the SPA, all scripts loaded the first time. When we move pages, autofocus angular 4 on certain input elements will not work properly

Using native javascript, you can focus on the input field with the following commands

Angular 4 cannot apply the above function directly although angular is javascript framework.

You need a directive so that the focus function to work properly in angular.

Autofocus Directive in Certain Elements Angular 4

Create a new angular project using Angular cli

create a new directive with the name “autofocus” using the following command

Create Autofocus Directive In Certain Element Angular 4

Then edit autofocus.directive.ts and copy the following code

Create two components to test the directive script. We need two components to move from one page to another so that directive performance can be seen.

Create a home component using the following script

Create Home Component Angular 4

Create a test component using the following script

Create Test Component Angular 4

Edit test.component.html and copy the following script

A brief description:

In this example, i putt appAutoFocus directive in the input boxes number 3

Create an angular routing with app.routing.ts name and copy the following code

Open app.component.html and copy the following code

Run the app with the following command

Test the above script, and make sure your apps run well like the following gif image

Autofocus Directive Angular 4 Example

Little explanation:

Our focus on test.component.ts

  • To use autofocus directive angular 4 as good as using autofocus html5. Add the appAutofocus attribute to the input boxes we’ll focus on.
  • Make sure you have import directive on app.module.ts and run the apps.

But it would be different if we want to use the focus() function on the angular 4. In native javascript, we use the following code to autofocus on text input:

Angular requires @Viewchild decorator to interact with elements in component templates.

For example, add the following HTML code to test.component.html:

Add some code to the following test.component.ts

Run the app, make sure the app works correctly as the next gif

Focus Function Input Boxes Angular 4

Read another article: Angular 4 Tutorial For Beginner With Simple App Project

If you need a complete autofocus directive file, you can download it from the following link. To open the download link, share this article through social media account using the button below.

So my article on focus on element directive in angular 4, may be useful

The following two tabs change content below.
This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.


 Add your comment
  1. The routing and AutofocusDirective failed!.

Leave a Comment

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.