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.
Related
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.
I am using a datepicker control on my page which is rendered through ng-if dependent on a specific dropdown value.
The problem I'm facing is since at the time of rendering, that datepicker input is not part of DOM, so later when I change the value of dropdown, the datepicker control does not work.
If I use ng-show, I encounter issues in validations.
Any suggestions?
Thanks.
Use ng-show/ng-hide instead of ng-if, because the ng-if directive removes or recreates a portion of the DOM tree based on an expression. If the expression assigned to ng-if evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.
More details. please refer this link : what is the difference between ng-if and ng-show/ng-hide
Try "$scope.apply()" after the toggling of ng-if variable.
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.
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
there is an ng-show directive in angular, but is there a ng-render directive? that adds the template of a directive to the dom only when conditions are met?
the problem with ng-show is that it only uses css to hide elements, and since I am creating an enormous list, and I am only displaying the visble elements, I dont want the content of not visible content to be partially rendered.
You can use ng-if or ng-switch. Neither include content unless your conditions are met.