CODEWITHSUNDEEP
javascriptangularjsperformancedirectivejqlite
Kraken
Kraken

Reputation: 5870

angular.element().hide() versus ngIf

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

Upvotes: 3

Views: 7827

Answers (2)

Karim
Karim

Reputation: 8632

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

Upvotes: 2

Thalaivar
Thalaivar

Reputation: 23642

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.

Upvotes: 3

Related Questions