I have seen this questions many times, but not once have I seen a normal answer.

What is the difference between ng-hide and ng-show? is there one? if so when to use one or the other ( I understand ng-if, I am asking only about this two).

I hope some one knows thanks.

I have seen this questions many times, but not once have I seen a normal answer.

What is the difference between ng-hide and ng-show? is there one? if so when to use one or the other ( I understand ng-if, I am asking only about this two).

I hope some one knows thanks.

• javascript
• html
• angularjs
• ng-show
• ng-hide

Share Improve this question Follow asked Jan 23, 2017 at 8:44 user24136user24136 13544 silver badges1313 bronze badges 11

• 2 You can use either of them to get the desired result. However both ng-hide and ng-show exists for sementics. – Satpal Commented Jan 23, 2017 at 8:46
• do you want to know if them are used for particular cases? If that's so I only could think of usage like this: <div id="hidden" ng-hide>Hidden</div> pared to this <div id="show_only_if" ng-show="condition === true">COnditionned<div> – sTx Commented Jan 23, 2017 at 8:54
• 1 so ng-hide can be used without a condition as a replacement for display: none – sTx Commented Jan 23, 2017 at 8:55
• If you would ask what is the difference between ng-show and ng-if, it's more reasonable. This case is very clear. – Vahid Najafi Commented Jan 23, 2017 at 8:58
• @vahidnajafi the difference between ng-if is well written and understood in angular site. that's why I ask on this two. – user24136 Commented Jan 23, 2017 at 9:05

 |  Show 6 more ments

4 Answers 4

Sorted by: Reset to default 3

The ngShow directive shows or hides the given HTML element based on the expression provided to the ngShow attribute.

The element is shown or hidden by removing or adding the .ng-hide CSS class onto the element. The .ng-hide CSS class is predefined in AngularJS and sets the display style to none (using an !important flag).

ngHide is just syntaxic sugar when you need to invert the result of the expression.

Basically, it would be the same to use ng-show="!testSomething()" and ng-hide="testSomething()".

All these directives like ng-hide , ng-show and ng-if take a condition in the form of a boolean and show/hide from view according to true and false. The logic they use to hide and show the view are different.

ng-show and ng-hide use internally CSS like this:

display: none; // according to show or hide

But when we use ng-if- if condition is true: adds the element into DOM. if condition is false: removes element from the DOM.

It means ng-show keeps the elements in the DOM and the cost of watcher remain the same, while the user isn't allowed to see the element in the DOM. And if you replace ng-show with an ng-if, you might witness considerable improvements in the DOM because those extra watches are not there to take responsibility.

If a particular element has ng-if/ng-show/ng-hide in the DOM, then it can have a performance impact. When you use ng-if, the app will be faster pared to ng-show/ng-hide. But the difference is not noticeable. But if you are using these directives in animations, then there is a possibility of performance issues.

In short, if you can remove an element from DOM, then you should use ng-if, otherwise you should use ng-show or ng-hide.

ng-show 

Lets you make the display:block of the element when expression is true while ng-hide lets you set the display:none when the expression is true. They are just opposite to each other. Don't get confused. Use only one, ng-show as ng-show="exp" and ng-show="!exp" to show or hide an element

As we know angularjs is a two way databinding. ng-hide and ng-show is we used for two different purpose one for hide and another for show. for example if you use one method that returns true or false. In any case hide of one element you want to show other then you need to use only one method for both hide and show.