The ng-focus Directive in AngluarJS is used to apply custom behavior when an element is focused. It can be used to show/hide some element or it can pop up an alert when an element is being focused. It is supported by , , and elements.
Syntax:
Contents...
Parameter:
- expressions: It specifies what to do when the input gets focused.
Example 1: This example uses the ng-focus Directive to display the text area field.
<html>
<head>
<title>ng-focus Directivetitle>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
script>
head>
<body ng-app="" style="text-align:center">
<h1 style="color:green">GeeksforGeeksh1>
<h2>ng-focus Directiveh2>
<a href="" ng-focus="isCheck=true">
Click to proceed.
a><br>
<div class="row" ng-show="isCheck">
Enter Name:
<input type="text"
ng-focus="isCheck=true"
placeholder="geeksforgeeks" />
div>
body>
html>
Output:

Example 2: This example uses the ng-focus Directive to display focus on the input text field.
<html>
<head>
<title>ng-focus Directivetitle>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
script>
head>
<body ng-app="app" style="text-align:center;">
<h1 style="color:green">
GeeksforGeeks
h1>
<h2>ng-focus Directiveh2>
<div ng-controller="geek"> Input:
<input type="text"
ng-focus="focused = true"
ng-blur="focused = false" />
<pre ng-show="focused">
Input is focused.
pre>
div>
<script>
var app = angular.module("app", []);
app.controller('geek', ['$scope',
function($scope) {}]);
script>
body>
html>
Output:
