Pitch your project

Random text


By admin Category Uncategorized, Posted February 12th, 2016
AngularJS: using ng-show

Ng-show is a directive that can show or hide a HTML element with a expression provided to the ng-show attribute.
If the expression evaluates to a truthy it will show the HTML element and if it evaluates to a falsy it will hide the HTML element.
ng-show shows or hides HTML elements by adding or removing the CSS class ng-hide.
The .ng-hide CSS class is predefined in AngularJS and sets the display style to none (using an !important flag).

How to use ng-show

You can use ng-show by giving a HTML element the ng-show attribute with a expression.


    <any ng-show="expression">  </any>

In the browser it can look like this:

    <!-- when myValue is truthy (element is visible ng-hide will be removed) -->
    <div ng-show="myValue"></div>

    <!-- when myValue is falsy (element is hidden and ng-hide will be added) -->
    <div ng-show="myValue" class="ng-hide"></div>

You can add CSS to the hidden HTML element by adding .ng-hide to the CSS, like this.

    //ng-hide globally
        //propertiesYou may be wondering why !important is used for the .ng-hide CSS class. This is because the .ng-hide selector can be easily overridden by heavier selectors. For example, something as simple as changing the display style on a HTML list item would make hidden elements appear visible. This also becomes a bigger issue when dealing with CSS frameworks.


    //ng-hide on a element

When and why use ng-show

You want to use ng-show if you want to show/hide a element without removing the element(ng-if) because removing the element with ng-if, you will discard everything inside it.
why you should use ng-show over ng-if depends on some conditions:
– do you want show/hide many elements without having to render them each time something commonly used happens, then you want ng-show,
– do you want users to be able to change the HTML to see the content because ng-show will still keep the element in the HTML and ng-if will remove it;

Posted by Tjeerd Verschragen


Leave a Reply

Your email address will not be published. Required fields are marked *