Articles → ANGULAR.JS → Ng-Show And Ng-Hide In Angular.JS

Ng-Show And Ng-Hide In Angular.JS

In this article, we will see ng-show and ng-hide directives in angular.js.

Ng-Show Directive

The ng-show directive is used to show or hide a HTML element based on an expression. Consider an example of a web page that contains a button and a textbox. The requirement is – button is only visible when there is some text in the textbox.

To accomplish that you write following code

<div ng-app="app">
	<input type="textbox" ng-model="value" />
	<br />
	<input type="button" value="Click" ng-show="value" />
</div>

Now run the application

Picture showing the output of ng-show in angular.js

Click to Enlarge

Ng-Hide Directive

This directive is just opposite of ng-show directive. In the preceding code if ng-show is replaced by ng-hide then code will be

<div ng-app="app">
	<input type="textbox" ng-model="value" />
	<br />
	<input type="button" value="Click" ng-hide="value" />
</div>

If you run the application you see the following output

Picture showing the output of ng-hide in angular.js

Click to Enlarge

Posted By -	Karan Gupta

Posted On -	Saturday, January 23, 2016

Query/Feedback

Your Email Id

Subject

Query/Feedback	Characters remaining 250