2

As I know ng-show and ng-hide both are used to Show or Hide the given HTML element. But I was asked a question in an interview, that why do we need ng-hide if we have ng-show. What is the reason that we should favor ng-show over ng-hide or vice versa?

I know the difference between ng-if vs ng-show/ng-hide but Ii want to know the difference between ng-show and ng-hide as the functionality of these two are same.

Dale K
  • 25,246
  • 15
  • 42
  • 71
user123
  • 81
  • 2
  • 10
  • 6
    Possible duplicate of [what is the difference between ng-if and ng-show/ng-hide](https://stackoverflow.com/questions/19177732/what-is-the-difference-between-ng-if-and-ng-show-ng-hide) – Rakesh Burbure Jan 29 '18 at 07:21
  • @Doggo. Done. thanks. – Rakesh Burbure Jan 29 '18 at 07:24
  • @RakeshBurbure are you sure the possible duplicate contains the answer to the question that OP has posted? – tryingToLearn Jan 29 '18 at 07:25
  • @theLearner: yes.. – Rakesh Burbure Jan 29 '18 at 07:26
  • 1
    @RakeshBurbure Most of the answers there are ng-if vs ng-show/ng-hide and not ng-show vs ng-hide. – tryingToLearn Jan 29 '18 at 07:27
  • As the name suggest it hide or show the elements or DOM tree based on the condition. However, unlike ng-if which removes the element from the DOM tree it (ng-show/ng/hide) does not manipulate the DOM structure. – Akki Jan 29 '18 at 07:32
  • 1
    OP clearly wants a difference between ng-show and ng-hide. Not ng-if and ng-show/hide. – DragonBorn Jan 29 '18 at 07:44
  • 1
    They both add or remove a css class `.ng-hide`. The only difference is in the logic: 'I need to **hide** the element only when...' and 'I need to **show** the element only when...'. – Denis Chizhik Jan 29 '18 at 07:58
  • 1
    You can check this for answer https://stackoverflow.com/a/30223662/5756149 – charan tej Jan 29 '18 at 08:01
  • Possible duplicate of [What's the difference between \`ng-show\` and \`ng-hide\`?](https://stackoverflow.com/questions/30222432/whats-the-difference-between-ng-show-and-ng-hide) – tryingToLearn Jan 29 '18 at 10:25

3 Answers3

2

The reason is simple, it is used to simplify the coding, in most of the scenarios we can easily miss ! in our code and it is also not a good coding practice. NG-HIDE will be used in the scenario where condition is true most of the times but false in some conditions whereas NG-SHOW will be used in the scenario where condition is false most of the times but true in some conditions.

Both of them will check for truthy values.

Dale K
  • 25,246
  • 15
  • 42
  • 71
Vikash Kumar
  • 1,712
  • 1
  • 11
  • 17
0

The ng-hide directive hides the HTML element if the expression evaluates to true.

ng-hide is also a predefined CSS class in AngularJS, and sets the element's display to none.

<element ng-hide="expression"></element>

When used as a CSS class:

<element class="ng-hide"></element>

The ng-show directive shows the specified HTML element if the expression evaluates to true, otherwise the HTML element is hidden.

<element ng-show="expression"></element>

This information was taken from: w3schools-ngHide, w3schools-ngShow

d4rty
  • 3,970
  • 5
  • 34
  • 73
0

The difference between ng-if and ng-show/ng-hide is,

ng-if - It renders the HTML content if the condition is true, otherwise it does not render any content on DOM.

ng-show/ng-hide - It shows or hides the content of html, which is already present on DOM. The actual html element is present in DOM, only we are showing or hiding it based on condition.

Nilesh Manpathak
  • 1
  • 1