CODEWITHSUNDEEP
angularjsangular-ng-ifangularjs-ng-show
Anil kumar
Anil kumar

Reputation: 928

When to use ng-if vs ng-show/ng-hide?

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 any examples on choosing ng-if over ng-show/ng-hide or vice-versa?

Upvotes: 3

Views: 1609

Answers (2)

intekhab
intekhab

Reputation: 1596

If there is some information what you dont want to show to user any how. You want that user cant see it anyhow even after editing DOM from inspect element then use ng-if otherwise use ng-show.

ng-show renders the dom but if condition is false then element display will be invisible.

`ng-if` renders the `dom` only if condition is true

There are situations when you are force to use ng-show ex: Consider you are using any jquery plugin which runs on dom ready on any element. If element is getting rendered later when ng-if gets true then jquery will not work. In this case you will be need to use ng-show

Upvotes: 1

David L
David L

Reputation: 33833

You've already summed it up in your question. If you want to show and hide the DOM depending on a condition, use ng-show. This works well for DOM transitions between workflows, tabs, sections, etc.

<div ng-show="vm.tab == 'products'"></div>

If you only want to conditionally render the DOM if a condition occurs, use ng-if. This is particularly useful for permissions where you aren't interested in exposing any more DOM than necessary.

<button ng-if="vm.data.allowSubmit" ng-click="vm.submit()" />

Upvotes: 4

Related Questions