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>