3

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 comments

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()

Kraken
  • 5,043
  • 3
  • 25
  • 46

2 Answers2

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 completely 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.

Thalaivar
  • 23,282
  • 5
  • 60
  • 71
2

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.org/api/ng/directive/ngShow

Karim
  • 8,454
  • 3
  • 25
  • 33
  • so ngHide uses .hide()? I understand the difference in the DOM - I'm more curious about the difference between the directive and the jquery throwbacks. (it is all still very helpful, though) – Kraken Dec 01 '16 at 17:45
  • i've edited my answer. As reported in the doc ng-hide style the element with display: none !important, but actually i think it uses the jqlite implementation rather than jquery, probably .css( "display", "none" ). https://docs.angularjs.org/api/ng/function/angular.element – Karim Dec 02 '16 at 09:02