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.
The directive shows or hides the HTML element based on the expression provided to
ngIf differs from
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.
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.