You’ve probably
come across ng-if and ng-show and wondered why they
both exist and what’s the difference between them. After all they
usually have the same behavior as far as the user is concerned.
The devil is in the
details and the differences between these directives can allow your
to boost your application’s performance easily.
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.
