javascriptjqueryangularjsangularjs-ng-show

Performance about ng-show vs. ng-hide

Introduction:-

Some people are only using ng-show instead of ng-hide="!true" Or some peoples are using ng-hide instead of ng-show="!true". Technically we don't need ng-hide directive. But! I know angular introduced ng-hide for standard coding structure. And please understand me, I am asking about the performance not difference.

My Question:-

So my question is what about the performance of this following scenarios?

Solution

  • No different performance between ng-hide vs ng-show. It just uses CSS to show/hide the element.

    <div ng-hide="true"></div> // => display: none !important;

<div ng-hide="!true"></div> // => display: block !important;

    Similar for ng-show:

    <div ng-show="true"></div> // => display: block !important;

<div ng-show="!true"></div> // => display: none !important;

    You should compare ng-show (show element use CSS) vs ng-if (add element to DOM) about performance.