ngIf
The ngIf
removes the HTML element if the expression evaluates to false. If the expression evaluates to true, a copy of element is added in the DOM.
ngShow/ngHide
The directive shows or hides the HTML element based on the expression provided to ngShow/ngHide
attribute.
Difference
ngIf
differs from ngShow
and ngHide
in a way that ngIf
completely removes and recreates the element in the DOM rather than changing its visibility via the display css property. The element is shown or hidden by removing or adding the ng-hide
CSS class onto the element.
The major catch is the performance difference.
With ngShow
leaves the elements alive in the DOM, it means that all of their watch expressions and performance cost are still there even though they are hidden. For views with multiple ngShows
you might notice a slight lag in page load time.
One of the solution is to replace ngShow
with a ngIf
. This will result in considerable improvements in the responsiveness of application or page load because those extra watches are no longer happening.
Reference:
https://docs.angularjs.org/api/ng/directive/ngIf
https://docs.angularjs.org/api/ng/directive/ngShow