Hiding or showing parts of a DOM based on some conditions is a common requirement. AngularJS has four different directives (ng-show / ng-hide, ng-if, ng-include, ng-switch
), which are used to conditionally display or hide the HTML DOM elements.
Conditional display using ng-show/ng-hide
The ng-show / ng-hide
directives require a boolean value to evaluate the visual state. This boolean value may come from a variable or a function.
1 2 3 4 5 6 7 8 |
/*ng-show / hide */ <div ng-show=”showSecretData”>Secret data</div> /*same can be re-written using ng-hide directive */ <div ng-hide=”!showSecretData”>Secret data</div> <div ng-show=”name == ‘myName’”>Some data</div> <div ng-show=”Display()”>Some data</div> |
Demo of ng-show / ng-hide directive
Download this demo example of ng-hide / ng-show directive
ng-show / ng-hide
directives apply‘display:none’
to hide the DOM elements, hidden elements are not removed from the DOM tree.
Conditional display using ng-switch directive
ng-show / ng-hide
simply apply ‘display:none’
to hide the DOM elements. ng-switch
directive can be used to physically remove or add the DOM elements. It is similar to the traditional switch, case
statement.
1 2 3 4 5 |
/*ng-switch*/ <div ng-switch on=”showSecretData”> <div ng-switch-when=”true”>You can see my secret!</div> <div ng-switch-default>Secret is not visible for you!</div> </div> |
Demo of ng-switch and ng-if directive
Download this demo example of ng-switch and ng-if
ng-show / ng-hide
directives are easy to use but, will have performance issue when used to large number of DOM nodes.
Conditional display using ng-if directive
ng-If
directive is similar to the ng-switch
(adding / removing the DOM elements from the DOM tree) and it can be used simply as ng-hide /ng-show
(require a boolean value to evaluate visual state). Demo example of the ng-if
is along with the ng-switch
above. If you check all the framework, a success message come using the ng-if
.
ng-if
is a version ofng-switch
with single condition,ng-switch
is more verbose, it should not be used in simple use-case.
Conditional display using ng-include
ng-include
directive can be used to display block of dynamic content. It can fetch external HTML template depending on a specific condition. It can be used with a fixed part of page like header, footer
1 2 |
/* ng-include */ <div ng-include="header.html"> </div> |
yeah – but key is we are NOT manipulating DOM like jquery way
Absolutely correct Rahul – jQuery is a great tool for DOM manipulation, if the requirement is only DOM manipulation and no data CRUD then jQuery is the right choice. But AngularJS gives more than just DOM manipulation. It’s a matter of requirement; Every hammer do not fit for all nails.
Another option is the “jqLite” .remove(). In case you need the elements available but want to clean up after making the choice.
i.e.
I had this problem before when I was trying to swipe between 2 ui-views in my index. I left both and removed the unnecessary element using .remove() in the app.run
angular.element( document.querySelector( ‘#element’ ) ).remove();
“ng-if, ng-switch and ng-include didn’t work for me” and I didn’t want to only hide the other element.
Talking JQuery and Angular – this is a great read which actually talks about how to think Angular Way – and NOT JQuery way.
http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background
Bottom line – if you design your application right, you should be able to live without (or well – minimal) DOM Manipulation.
Thanks Rahul, This link is terrific! Thanks for sharing
Use the mentioned ng-* to show/hide or even render (if/switch/include) parts of the DOM. If you need low level DOM manipulation use jQuery/jQLite inside a directive.
@Carla – have u tried ng-show / ng-hide ? I use it extensively and works like charm. Now it even supports some level of expressions and conditions.
You can use JQ (more than just jqlite) for sure (as long as u r loading Jq before angular – as it uses it then instead of jqlite) – but again it breaks the fun and design principle …
@Rahul: If ng-show / ng-hide is used with a large number of DOM nodes. It will have performance issue, as it doesn’t add/remove the element from DOM. It just apply “display: none;” in the hidden element. So, using ng-show/hide extensively, will offcourse bring performance issue.
@Rahul I was building a very small application with mobile detection (didn’t justify 2 builds).
I was trying to get my mob version view with a transition animation as native app.
At first I used hide/show but I saw a weird behaviour on the view with the “ng-animate” when at desktop version so I decided to clean it up.
The only option was to have both views available and remove the unnecessary one after detection in the app.run
* I think the weird behaviour I could see on the console was just because hide/show works only on the css level in the display property and the css “animation” I added were still woking in the hidden element. (didn’t like the blinking movement that I saw when I was checking the code It was too alive to be dead)
Totally agree with you in the use of JQ with Angular, trying my best to stick to the Angular script 😉 …… but it proves to be quite tricky for now mainly with the animation bit when I need to support IE browsers.
@Carla – supporting will be a real pain. You will end up using IEShiv. I faced that issue and spent sleepless nights … finally now we support IE9+ with newer version of botstrap.
Can’t help on ng-animate as I haven’t used it yet. But Good Luck 🙂
AngularJS supports two types of animations – CSS3 and Javascript (for example jQuery animate).
You can do browser detection, and decide which animation to use.
For example, if I detect that the browser supports CSS3, I’ll add a class to the main container that will enable CSS3 animations, and I will disable the javascript animation module, and vice versa.
This is a good guide for the new angular animations(ng 1.2 and above): http://bit.ly/angularAnimations
If you use angular 1.15 you still use the now deprecated ngAnimate: http://bit.ly/ngAnimate
I guess the best option for the css3 detection would be modernizr
Backbone is sometimes misspelled as BackNONE
Can we open and close html tag conditionally ?
Is it possible ?
Hello