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

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.

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.

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

Demo of ng-include directive


Download the demo example of ng-include directive

Author: Gopal Juneja

A UX/UI enthusiast living in India Delhi having 18+ years of industry experience to use in beautiful design and handsome front end coding.

16 thoughts on “AngularJS – Conditional Display using ng-show / ng-hide, ng-if, ng-include, ng-switch”

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

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

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

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

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

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

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

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

Leave a Reply to Rahul Guha Cancel reply

Your email address will not be published.