When to use ng-if vs ng-show/ng-hide in Angular JS

Yasser Shaikh
Sep 27, 2015 · 1 min read

Both ng-if and ng-show/ng-hide directives, shows/hides/removes/add HTML to the DOM based on expression provided to the attribute. The approach they use to do this is different though.

ng-show — The element is shown or hidden by removing or adding the .ng-hide CSS class onto the element.

ng-if, on other hand differs from ng-show and ng-hide in that ng-if completely removes and recreates the element in the DOM rather than changing its visibility via the display CSS property.

You might notice a significant improvement in the responsiveness of your app if you repalce all your ng-show/ng-hide with ng-if. Because ng-show leaves the element on the DOM and all of its watch expressions and performance costs would still exists even though these elements are not viewable to the user.

References :

Yasser Shaikh's blog

It's supposed to be automatic, but actually you have to push this button.

Yasser Shaikh

Written by

Yasser Shaikh's blog

It's supposed to be automatic, but actually you have to push this button.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade