Difference between ng-if and ng-show or ng-hide?

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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s