Angular ng-hide or ng-show ? why?

Question

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.

Answer 1

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()" .

Answer 2

All these directive s 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 compared 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.

Answer 3

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

Answer 4

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.