This question already has answers here:
What is the difference between ng-if and ng-show/ng-hide
(12 answers)
Closed 5 years ago.
I was going through ng-if , ng-show and ng-hide but not completely gain it, all three of them doing the same thing so why there is three directive for one purpose?
The Differences
Both ng-show and ng-if receive a condition and hide from view the directive’s element in case the condition evaluates to false. The mechanics they use to hide the view, though, are different.
ng-show (and its sibling ng-hide) toggle the appearance of the element by adding the CSS display: none style.
ng-if, on the other hand, actually removes the element from the DOM when the condition is false and only adds the element back once the condition turns true.
Since ng-show leaves the elements alive in the DOM, it means that all of their watch expressions and performance cost are still there even though the user doesn’t see the view at all. In cases where you have a few big views that are toggled with ng-show you might be noticing that things are a bit laggy (like clicking on buttons or typing inside input fields).
If you just replace that ng-show with an ng-if you might witness considerable improvements in the responsiveness of your app because those extra watches are no longer happening.
That’s it: replace ng-show and ng-hide with ng-if!
The difference between ng-if and ng-show/ng-hide is that ng-if would not insert html fragment into the DOM if the condition results in false while ng-show/ng-hide would always insert html into the DOM but make it either visible or invisible.
Related
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.
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.
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
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.
I am aware of the difference between ng-show and ng-hide but I was asked a question in an interview that why do we need ng-hide if we have ng-show because we know that both shows or hides the given HTML element based on their values which can be true or false. What is the reason that we should favor ng-show over ng-hide or vice versa?
Readability.
ng-show="feature.enabled" is more readable than ng-hide="!feature.enabled". Double negations are harder to understand.
One thing to notice is that ng-show and ng-hide doesnt remove or create DOM elements but they simply toggles them being displayed or not with css
So it's easy to toggle one element keeping the other one hidden in the DOM
and of course they offer readability as said before.
<p ng-show="guess === number">Correct</p>
<p ng-hide="guess === number">Incorrect</p>
ng-hide takes priority over ng-show. So if you wanted to, you could combine the two and provide them with two different conditions, if you wanted to override ng-show with ng-hide for whatever reason. I would personally advise against this though, as you can just provide multiple conditions to the one directive to achieve what you need.
Example:
<h1>Good dogs</h1>
<div ng-repeat="dog in $ctrl.getDogs()" ng-show="dog.isGoodBoy()" ng-hide="dog.isBadBoy()">
<p>{{dog.name}} is a good boy.</p>
</div>
The code I am working on has this:
<div ng-if="cos.connectMessage" style="text-align: center;" class="ng-scope">
Unable to establish a connection to the localhost server for 5 minutes.</div>
Is there any advantage to using ng-show or ng-if to control the visibility of this message?
ng-show
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. (reference)
ng-if
The ngIf directive removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM. (reference)
Note: When ng-if removes the element it also removes the associated scope for that element and it get recreated when condition turns true.
Advantage
I prefer the use of ng-if specifically when number of watchers bound inside the element is more as it would completely destroy the scope so making the UI a bit faster. But for small elements or elements containing less watchers does cost overhead of removing scope and recreating it.
You can refer this for your solution, already lot of things asked in that
what is the difference between ng-if and ng-show/ng-hide
If you are using ng-if="false" then html content under ng-if will not includ in your html page, but if you are using ng-hide="true" or ng-show="false" then html part includ in your html page but it will only in hidden mode.
It might be related to this question: When to favor ng-if vs. ng-show/ng-hide?
But I don't find a direct answer -- that is, if ng-if evaluates to false, and there are a lot of logic under the children, such as other ng-show, ng-repeat, etc, then will ng-if just skip all those logic?
On the other hand, ng-show or ng-hide will actually run all those logic, create all the proper DOM elements, but just use CSS's mechanism of display: none to hide or show it? In other words, it could run potentially slow.
So if that's the case, if given a choice between ng-if and ng-show, if we know the elements (and all its children) won't need to be shown no matter what -- that is, it won't need to be shown by some flags or some toggle in the controller (but a flag in the database tells us not to show this item or section) -- then we may as well use ng-if to skip all potential processing?
Correct.
If the expression in ng-if evaluates to false, child directives, controllers etc will not be initialized/process because they are not yet added to the DOM. ng-show on the other hand just hides the presentation, the elements exist on the DOM and associated controller/directive functions will be process like a normal $digest.
Also, if the expression does evaluate from true, child directive linking functions and controllers will be processed. If the expression alternates between true and false, $destroy events will be fired when false giving you an opportunity to clean up your directives, controllers, $scopes etc, and linking/controller functions will be processed again once true.
This answer here gives an example showing the order of ops for digestion which will happen once if is true.
I understand that ng-show and ng-hide affect the class set on an element and that ng-if controls whether an element is rendered as part of the DOM
Are there any examples on choosing ng-if over ng-show/ng-hide or vice-versa?
You've already summed it up in your question. If you want to show and hide the DOM depending on a condition, use ng-show. This works well for DOM transitions between workflows, tabs, sections, etc.
<div ng-show="vm.tab == 'products'"></div>
If you only want to conditionally render the DOM if a condition occurs, use ng-if. This is particularly useful for permissions where you aren't interested in exposing any more DOM than necessary.
<button ng-if="vm.data.allowSubmit" ng-click="vm.submit()" />
If there is some information what you dont want to show to user any how.
You want that user cant see it anyhow even after editing DOM from inspect element then use ng-if otherwise use ng-show.
ng-show renders the dom but if condition is false then element display will be invisible.
`ng-if` renders the `dom` only if condition is true
There are situations when you are force to use ng-show
ex: Consider you are using any jquery plugin which runs on dom ready on any element. If element is getting rendered later when ng-if gets true then jquery will not work. In this case you will be need to use ng-show