Setting focus on input field in Angular

Current Location：Home > Learning > WEB FRONT-END > Angular >

Vue React JavaScript Angular CSS HTML

Setting focus on input field in Angular

Author：JIYIK Last Updated：2025/04/18 Views：

In Angular, you can use ng-modelthe directive to focus on the input field of any HTML element and bind the value of the input field to a variable in your application model.

ng-modelThe directive also provides an event handler that focuses the input field while the user is filling it in. When the user leaves this field, it fires an event that triggers validation logic or other behavior.

This article will demonstrate how to set the focus of an input field in Angular.

Steps to set focus of input field in Angular

You need to follow the steps below to set focus in Angular.

Create an Angular component.
Add the input component to your component.
Create a Focusdirective to manage the input field.
Then, add this directive to the list of providers by importing it app.module.ts.
Afterwards, when the user leaves the input field, ngBlurit's a good idea to use the directive to lose focus.

Let's apply the above steps and set the focus in our Angular application.

JavaScript code:

var app = angular.module('Adil', []);
var Demo = function ($scope) {
};
app.directive('focusMe', function() {
    return {
        scope: { trigger: '=focusIn' },
        link: function(scope, element) {
            scope.$watch('trigger', function(value) {
                if(value === true) {
                    element[0].focus();
                    scope.trigger = false;
                }
            });
        }
    };
});

HTML code:

<html ng-app="Adil">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js"></script>
    <script src="example.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
    <div ng-controller="Demo">
        <button class="btn"  ng-click="showForm=true;focusInput=true">click here</button>
        <div ng-show="showForm">
            <input type="text" focus-me="focusInput">
            <br>
            <button class="btn" ng-click="showForm=false">Click here to save the input field</button>
            <p>
                The black border around the corner shows that the input field is focused
            </p>
        </div>
    </div>
</body>
</html>

In this example, when you write in the box, it will show a black border around the corners of the box, which indicates that it has focus.

Why do we need to set focus in Angular? Setting focus on an input component in Angular ensures that the user input is valid.

This ensures that the user has no spelling mistakes and has entered all the necessary information. It also saves time when entering data into forms and provides a better experience for the user.

Previous：Select an option in the Angular drop-down menu

Next：Calling the load function in Angular

For reprinting, please send an email to 1244347461@qq.com for approval. After obtaining the author's consent, kindly include the source as a link.

Article URL：

JIYIK CN >