When to favor ng-if vs. ng-show/ng-hide?

Question

I understand that ng-show and ng-hide affect the class set on an element and that ng-if controls whether an element is rendered as part of the DOM.

Are there guidelines on choosing ng-if over ng-show/ng-hide or vice-versa?

Answer 1

• Elements that are not in the DOM have less performance impact and your web app might appear to be faster when using ng-if compared to ng-show/ng-hide. The difference is negligible. Animations are possible when using both ng-show/ng-hide and ng-if, with examples for both in the Angular documentation.

• The ng-if will remove elements from DOM where as the ng-show/ng-hide does not remove the elements from the DOM.

• The ng-if creates a child scope while ng-show/ng-hide does not.