AngularJS ng-keydown Directive Last Updated : 16 Aug, 2022 Comments Improve Suggest changes Like Article Like Report The ng-keydown Directive in AngluarJS is used to apply custom behavior on a keydown event. This directive will not be overridden by the element's original onkeydown event. Both the onkeydown event & the ng-keydown Directive will be executed. It is supported by <input>, <select> and <textarea> elements. Syntax: <element ng-keydown="expression"> Contents... </element> Parameter: expression: It specifies the expression will be executed when the key is pressed.Example: This example uses the ng-keydown Directive to change the background color after pressing the button. HTML <!DOCTYPE html> <html> <head> <title>ng-keydown Directive</title> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script> <style type="text/css"> .keyDown { background-color: green; color: white; } .keyUp { background-color: white; } </style> </head> <body ng-app style="text-align:center"> <h1 style="color:green"> GeeksforGeeks </h1> <h3>ng-keydown Directive</h3> <div> <b>Enter Name: </b> <input type="text" ng-model="searchValue" ng-keydown="keyDown=true" ng-keyup="keyDown=false" ng-class="{true:'keyDown', false:'keyUp'}[keyDown]" /> </div> </body> </html> Output: Example 2: This example uses the ng-keydown Directive to change the font-size when the key down button is pressed. HTML <!DOCTYPE html> <html> <head> <title>ng-keydown Directive</title> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script> <style type="text/css"> .keyDown { font-family: 'Times New Roman', Times, serif; font-size: 17px; } </style> </head> <body ng-app style="text-align:center"> <h1 style="color:green"> GeeksforGeeks </h1> <h3>ng-keydown Directive</h3> <div> <b>Enter Name: </b> <input type="text" ng-model="searchValue" ng-keydown="keyDown=true" ng-class="{true:'keyDown'}[keyDown]" /> </div> </body> </html> Output: Comment More infoAdvertise with us Next Article AngularJS ng-keydown Directive V Vishal Chaudhary 2 Follow Improve Article Tags : Web Technologies AngularJS AngularJS-Directives Similar Reads AngularJS ng-keyup Directive The ng-keyup Directive in AngluarJS is used to apply custom behavior on a keyup event. It is supported by <input>, <select> and <textarea> elements. Syntax: <element ng-keyup="expression"> Contents... </element> Parameter: expression: When a keypress is finished, then t 2 min read AngularJS ng-mousedown Directive The ng-mousedown Directive in AngularJS is used to apply custom behavior when mousedown event occurs on a specific HTML element. It can be used to show a popup alert when the mouse button is pressed down. It is supported by all HTML elements. Syntax: <element ng-mousedown="expression"> Content 1 min read AngularJS ng-keypress Directive The ng-keypress Directive in AngluarJS is used to apply custom behavior on a keypress event. It is mainly used to specify what to do when the keyboard is utilized with a particular HTML element. The order of sequence that the key is pressed is Keydown, Keypress, and keyup. It is supported by <inp 2 min read AngularJS ng-hide Directive The ng-hide Directive in AngluarJS is used to show or hide the specified HTML element. If the expression given in the ng-hide attribute is true then the HTML elements hide. In AngularJS there is a predefined class named ng-hide which is used to set the display to none. Syntax: <element ng-hide="e 2 min read AngularJS ng-href Directive The ng-href directive is used when we have an angular expression inside the href value. If href attribute is used then the problem is that if in case the link is clicked before AngularJS has replaced the expression with its value then it may go to the wrong URL and the link will be broken and will m 2 min read Like