Angular gives access to some jquery functions here

I'm just wondering if there is any difference in performance between .hide() and using the ngIf directive?

Added clarification that came from ments

I understand the difference between ngIf and ngShow, but I'm wondering about the performant differences between using the ng directives versus calling angular.element() and chaining it with .hide()

Angular gives access to some jquery functions here

I'm just wondering if there is any difference in performance between .hide() and using the ngIf directive?

Added clarification that came from ments

I understand the difference between ngIf and ngShow, but I'm wondering about the performant differences between using the ng directives versus calling angular.element() and chaining it with .hide()

• javascript
• angularjs
• performance
• directive
• jqlite

Share Improve this question Follow edited Dec 2, 2016 at 11:32 Kraken asked Dec 1, 2016 at 17:17 KrakenKraken 5,92033 gold badges3030 silver badges5252 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

hide/show would not remove the element from the dom but would just add display:none property where as ng-if would remove the element pletely from the dom.

If your UI has a lot of elements, you can use ng-if to instantiate the relevant ones which would save a lot of resources. As your view does not need to create all the ones and then apply display:none property to one which should not be shown in view.

If you are going to remove and show an element very often from your view, hiding it instead of removing could improve performance.

the .hide() method is equivalent to .css( "display", "none" ), while ng-if remove the element from the dom. This is the major difference.

jqlite .hide() acts the same way as ng-show / ng-hide directives

The .ng-hide CSS class is predefined in AngularJS and sets the display style to none (using an !important flag).

https://docs.angularjs/api/ng/directive/ngShow