AngularJS – Conditional Display using ng-show / ng-hide, ng-if, ng-include, ng-switch

Feb 5, 2014

—

AngularJS logo

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.

/*ng-show / hide */

Secret data
/*same can be re-written using ng-hide directive */
Secret data

Some data
Some data

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.

/*ng-switch*/

    You can see my secret!
    Secret is not visible for you!

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 of ng-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

/* ng-include */

Demo of ng-include directive

Download the demo example of ng-include directive

About the author

GOPAL JUNEJA

UX Enthusiast – Enterprise & SAAS Based Apps

Comments

14 responses to “AngularJS – Conditional Display using ng-show / ng-hide, ng-if, ng-include, ng-switch”

Rahul Guha

February 6, 2014

yeah – but key is we are NOT manipulating DOM like jquery way

Reply
1. Gopal
  
  February 6, 2014
  
  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.
  
  Reply
Carla Franca

February 6, 2014

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.

Reply
Rahul Guha

February 7, 2014

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.

Reply
1. Gopal
  
  February 7, 2014
  
  Thanks Rahul, This link is terrific! Thanks for sharing
  
  Reply
Ori Drori

February 7, 2014

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.

Reply
Rahul Guha

February 7, 2014

@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 …

Reply
1. Gopal
  
  February 7, 2014
  
  @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.
  
  Reply
Carla Franca

February 7, 2014

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

Reply
Rahul Guha

February 7, 2014

@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 🙂

Reply
Ori Drori

February 7, 2014

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

Reply
Carla Franca

February 7, 2014

I guess the best option for the css3 detection would be modernizr

Reply
Tudor S.

August 19, 2015

Backbone is sometimes misspelled as BackNONE

Reply
Sandeep

December 17, 2015

Can we open and close html tag conditionally ?

Is it possible ?

Hello

Reply