There are lot of directives in AngularJS.There are directives for lot of common scenarios such as populating drop down ,applying css and showing and hiding elements.
When we want to show and hide elements conditionally there are two set of directives wich we can use.These are ng-show,ng-hide and ng-if.
ng-show and ng-hide
We can use ng-show and ng-hide for displaying elements conditionally.For example if we want to display a div based on a condition then we need to pass a boolean expression to ng-show directive.
<div ng-show="BooleanValue" ></div>
Similarly if we want to hide an element based on some boolean value then we use the ng-hide directive as:
<div ng-hide="BooleanValue" ></div>
We can use ng-show or ng-hide according to our requirement ,whether we want display or hide HTML element.
It should be understood that ng-hide is also a css class in AngularJS which hides an html element.
ng-If
The ng-if directives removes the specified HTML element from the DOM tree instead of hiding it.It loads the HTML element only when the boolean expression is true.
So if an HTML element has large overhead,because of its size, then it is better to unload it from the DOM using ng-if directive.
When deciding which of these directives to use ,consider the following points:
Use ng-show or ng-hide when you don’t want to display and hide the elements multiple times.This is because the event handlers and directives are removed when we use ng-if.So if the condition returns true then there is a performance overhead.
If the element in question has considerable size ,because of data, then use ng-if.This is because when we use ng-if then the element is removed from DOM.This difference alone will result in big performance improvement.
Leave a Reply