When to favor ng-if vs ng-show ng-hide

Question

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 guidelines on choosing ng-if over ng-show ng-hide or vice-versa

User · Answer

See here for a CodePen that demonstrates the difference in how ng-if/ng-show work, DOM-wise.

@markovuksanovic has answered the question well. But I'd come at it from another perspective: I'd always use ng-if and get those elements out of DOM, unless:

you for some reason need the data-bindings and $watch-es on your elements to remain active while they're invisible. Forms might be a good case for this, if you want to be able to check validity on inputs that aren't currently visible, in order to determine whether the whole form is valid.
You're using some really elaborate stateful logic with conditional event handlers, as mentioned above. That said, if you find yourself manually attaching and detaching handlers, such that you're losing important state when you use ng-if, ask yourself whether that state would be better represented in a data model, and the handlers applied conditionally by directives whenever the element is rendered. Put another way, the presence/absence of handlers is a form of state data. Get that data out of the DOM, and into a model. The presence/absence of the handlers should be determined by the data, and thus easy to recreate.

Angular is written really well. It's fast, considering what it does. But what it does is a whole bunch of magic that makes hard things (like 2-way data-binding) look trivially easy. Making all those things look easy entails some performance overhead. You might be shocked to realize how many hundreds or thousands of times a setter function gets evaluated during the $digest cycle on a hunk of DOM that nobody's even looking at. And then you realize you've got dozens or hundreds of invisible elements all doing the same thing...

Desktops may indeed be powerful enough to render most JS execution-speed issues moot. But if you're developing for mobile, using ng-if whenever humanly possible should be a no-brainer. JS speed still matters on mobile processors. Using ng-if is a very easy way to get potentially-significant optimization at very, very low cost.

User · Answer

One important note   ngIf  unlike ngShow  usually creates child scopes that may produce unexpected results   I had an issue related to this and I ve spent MUCH time to figure out what was going on    My directive was writing its model values to the wrong scope    So  to save your hair just use ngShow unless you run too slow   The performance difference is barely noticable anyway and I am not sure yet on who s favour is it without a test

User · Answer

The answer is not simple   It depends on the target machines  mobile vs desktop   it depends on the nature of your data  the browser  the OS  the hardware it runs on    you will need to benchmark if you really want to know   It is mostly a memory vs computation problem     as with most performance issues the difference can become significant with repeated elements  n  like lists  especially when nested  n x n  or worse  and also what kind of computations you run inside these elements    ng-show  If those optional elements are often present  dense   like say 90  of the time  it may be faster to have them ready and only show hide them  especially if their content is cheap  just plain text  nothing to compute or load   This consumes memory as it fills the DOM with hidden elements  but just show hide something which already exists is likely to be a cheap operation for the browser  ng-if  If on the contrary elements are likely not to be shown  sparse  just build them and destroy them in real time  especially if their content is expensive to get  computations sorted filtered  images  generated images   This is ideal for rare or  on-demand  elements  it saves memory in terms of not filling the DOM but can cost a lot of computation  creating destroying elements  and bandwidth  getting remote content   It also depends on how much you compute in the view  filtering sorting  vs what you already have in the model  pre-sorted pre-filtered data

User · Answer

ng-if on ng-include and on ng-controller will have a big impact matter on ng-include it will not load the required partial and does not process unless flag is true on ng-controller it will not load the controller unless flag is true but the problem is when a flag gets false in ng-if it will remove from DOM when flag gets true back it will reload the DOM in this case ng-show is better  for one time show ng-if is better

User · Answer

From my experience   1  If your page has a toggle that uses ng-if ng-show to show hide something  ng-if causes more of a browser delay  slower   For example  if you have a button used to toggle between two views  ng-show seems to be faster   2  ng-if will create destroy scope when it evaluates to true false   If you have a controller attached to the ng-if  that controller code will get executed every time the ng-if evaluates to true   If you are using ng-show  the controller code only gets executed once   So if you have a button that toggles between multiple views  using ng-if and ng-show would make a huge difference in how you write your controller code

User · Answer

Depends on your use case but to summarise the difference    ng-if will remove elements from DOM  This means that all your handlers or anything else attached to those elements will be lost  For example  if you bound a click handler to one of child elements  when ng-if evaluates to false  that element will be removed from DOM and your click handler will not work any more  even after ng-if later evaluates to true and displays the element  You will need to reattach the handler  ng-show ng-hide does not remove the elements from DOM  It uses CSS styles to hide show elements  note  you might need to add your own classes   This way your handlers that were attached to children will not be lost  ng-if creates a child scope while ng-show ng-hide does not   Elements that are not in the DOM have less performance impact and your web app might appear to be faster when using ng-if compared to ng-show ng-hide  In my experience  the difference is negligible  Animations are possible when using both ng-show ng-hide and ng-if  with examples for both in the Angular documentation   Ultimately  the question you need to answer is whether you can remove element from DOM or not

User · Answer

If you use ng-show or ng-hide the content  eg  thumbnails from server  will be loaded irrespective of the value of expression but will be displayed based on the value of the expression   If you use ng-if the content will be loaded only if the expression of the ng-if evaluates to truthy   Using ng-if is a good idea in a situation where you are going to load data or images from the server and show those only depending on users interaction  This way your page load will not be blocked by unnecessary nw intensive tasks

[angularjs] When to favor ng-if vs. ng-show/ng-hide?

Examples related to angularjs

Examples related to angularjs-directive