AngularJS | ng-show vs ng-if

I have noticed performance issue when use ng-show/ng-hide in responsive website. But improved the performance after changing to ng-if. I have identified performance issue in small devices which has less configuration.

The ng-if directive removes the content from the page and ng-show/ng-hide uses the CSS display property to hide content.

ng-if


It will add the DOM element only when the expression passed in the directive returns 'true', It will not add the DOM element if expression returns 'false'.

$scope.togglediv = true;

<div ng-if="togglediv">Show (ng-if)</div>

ng-show/ng-hide


It will not add/remove the DOM element from the DOM tree. It will show/hide DOM element with display property of CSS as per the expression. toggle the appearance of the element by adding the CSS display: none style.

$scope.togglediv = true;

<div ng-show="togglediv">Show (ng-show)</div>

Example

shanidkv's picture