AngularJS ng-hide Directive

The AngularJS ng-hide directive is used to hide the HTML element if the expression is set to true.

The element is shown if you remove the ng-hide CSS class and hidden, if you add the ng-hide CSS class onto the element. The ng-hide CSS class is predefined in AngularJS and sets the element's display to none.

As a CSS class:

Parameter explanation:

expression: It specifies an expression that will hide the element if the expression returns true.

Let's take an example to demonstrate ng-hide directive.

See this example:

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="">
Hide HTML: <input type="checkbox" ng-model="myVar">
<div ng-hide="myVar">
<h1>Welcome to JavaTpoint!</h1>
<p>A  solution of all technologoes.</p>
</div>
</body>
</html>

Test it Now

Next TopicAngularJS ng-href Directive

← prev next →