CODEWITHSUNDEEP
angularjs
user123
user123

Reputation: 91

What is the difference between ng-show and ng-hide in angularjs?

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.

Upvotes: 2

Views: 3190

Answers (3)

Vikash Kumar
Vikash Kumar

Reputation: 1718

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.

Upvotes: 2

Nilesh Manpathak
Nilesh Manpathak

Reputation: 1

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.

Upvotes: -1

d4rty
d4rty

Reputation: 4188

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

Upvotes: 0

Related Questions