AngularJS ng-hide Directive Last Updated : 03 Aug, 2022 Comments Improve Suggest changes Like Article Like Report 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="expression"> Contents... </element> Parameter: expression: It specifies the element will be hidden if the expression returns true.Example 1: This example uses the ng-hide Directive to display whether the entered number is a multiple of 5 or not. HTML <!DOCTYPE html> <html> <head> <title>ng-hide Directive</title> <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"> <div ng-controller="geek" ng-init="val=0"> <h1 style="color:green"> GeeksforGeeks </h1> <h2>ng-hide Directive</h2> Enter a number: <input type="text" ng-model="val" ng-keyup="check(val)"> <div ng-hide="hide"> <h3> The number is multiple of 5 </h3> </div> <div ng-show="hide"> <h3> The number is not a multiple of 5 </h3> </div> </div> <script> var app = angular.module("app", []); app.controller('geek', ['$scope', function($scope) { $scope.check = function(val) { $scope.hide = val % 5 == 0 ? false : true; }; }]); </script> </body> </html> Output: Example 2: This example uses the ng-hide Directive to hide content. HTML <!DOCTYPE html> <html> <head> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script> <title>ng-hide Directive</title> </head> <body> <div ng-app="app" ng-controller="geek"> <h1 style="color:green">GeeksforGeeks</h1> <h2>ng-hide Directive</h2> <input id="chbhide" type="checkbox" ng-model="hide" /> <label for="chbhide"> Hide Paragraph </label> <p ng-hide="hide" style="background: green; color: white; font-size: 14px; width:35%; padding: 10px;"> Hide this paragraph using ng-hide </p> </div> <script> var myapp = angular.module("app", []); myapp.controller("geek", function($scope) { $scope.hide = false; }); </script> </body> </html> Output: Comment More infoAdvertise with us Next Article AngularJS ng-hide Directive V Vishal Chaudhary 2 Follow Improve Article Tags : Web Technologies AngularJS AngularJS-Directives Similar Reads 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 AngularJS ng-if Directive The ng-if Directive in AngularJS is used to remove or recreate a portion of the HTML element based on an expression. The ng-if is different from the ng-hide directive because it completely removes the element in the DOM rather than just hiding the display of the element. If the expression inside it 2 min read AngularJS ng-model Directive The ngModel directive is a directive that is used to bind the values of the HTML controls (input, select, and textarea) or any custom form controls, and stores the required user value in a variable and we can use that variable whenever we require that value. It also is used during form validations. 4 min read 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-disabled Directive In this article, we will see the AngularJS ng-disabled Directive, along with understanding its implementation through the illustrations. The ng-disabled Directive in AngularJS is used to enable or disable the HTML elements. If the expression inside the ng-disabled attribute returns true then the for 2 min read AngularJS ng-form Directive The ng-form Directive in AngularJS is used to create a nested form i.e. one form inside the other form. It specifies an inherit control from the HTML form. It creates a control group inside a form directive which can be used to determine the validity of a sub-group of controls. Syntax: <ng-form [ 1 min read AngularJS ng-focus Directive 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 <a>, <input>, <select> and <textarea> elements. Syntax: 1 min read AngularJS ng-mouseup Directive The ng-mouseup Directive in AngularJS is used to apply custom behavior when a mouseup event occurs on a specific HTML element. It can be used to show a popup alert when the mouse button is pressed. The order of a mouse click is Mousedown, Mouseup, Click. It is supported by all HTML elements. Syntax: 2 min read AngularJS ng-app Directive The ng-app Directive in AngularJS is used to define the root element of an AngularJS application. This directive automatically initializes the AngularJS application on page load. It can be used to load various modules in AngularJS applications. The ng-app directive declares only once in the HTML doc 1 min read AngularJS Directive AngularJS is a Javascript open-source front-end framework that is mainly used to develop single-page web applications(SPAs). It has the ability to change static HTML to dynamic HTML. Its features like dynamic binding and dependency injection eliminate the need for code that we have to write otherwis 4 min read Like