Define ng-if, ng-show and ng-hide

In this article, we will be explaining about ng-if, ng-show and ng-hide directive.

  • ng-if Directive:

    The ng-if Directive in AngularJS is used to remove or recreate a portion of HTML element based on an expression.

    If the expression inside it is false then the element is completely removed from the DOM.

    if the expression is true then the element will be added to the DOM.

    Syntax:



    <element ng-if="expression"></element>
    

    Example:

    In following Example, When there is any text in input element then div content will be shown otherwise it will be hidden.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <script src=
    </script>
    <body ng-app="">
      
    Enter Text:<input type="text" ng-model="textcheck">
      
    <div ng-if="textcheck">
    <h1 style="color:green">GeeksforGeeks</h1>
    </div>
      
    </body>
    </html>

    chevron_right

    
    

    Output:

    When there is any text in the input field, Heading div is added to HTML DOM and is shown but when the input field is empty, div is removed and is not shown.

  • ng-show Directive: The ng-show Directive in AngluarJS is used to show or hide the specified HTML element.

    If given expression in ng-show attribute is true then the HTML element will display otherwise it hide the HTML element.

    Syntax:



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

    Example:

    In the following Example, When their checkbox is selected then div content will be shown otherwise it will be hidden.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
      <html>
        <script src=
        </script>
    <body ng-app="">
      
    <input type="checkbox" ng-model="check">
      
    <div ng-show="check">
      <h1 style="color:green">GeeksforGeeks</h1>
    </div>
      
    </body>
    </html>

    chevron_right

    
    

    Output:

    When the Check box is selected, the HTML attribute div are set to show, otherwise hide them.

  • ng-hide Directive: The ng-hide Directive in AngluarJS is used to show or hide the specified HTML element.

    If the expression given in the ng-hide attribute is true than the HTML elements hide.

    ng-hide is also a predefined CSS class in AngularJS, and sets the element’s display to none.

    Syntax:

     <element ng-hide="expression"> </element> 
    

    Example:



    In this example, If checkbox is selected this means ng-hide attribute is true and the HTML elements will hide.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
      <html>
        <script src=
        </script>
    <body ng-app="">
      
    Show DIV:<input type="checkbox" ng-model="check">
      
       <div ng-hide="check">
       <h1 style="color:green">GeeksforGeeks</h1>
    </div>
      
    </body>
    </html>

    chevron_right

    
    

    Output:

    When the Check box is selected, the HTML attribute div are set to hide, otherwise show them.

Basic Difference between ng-if, ng-show and ng-hide

ng-if directive ng-show directive ng-hide directive
The ng-if directive removes or recreates a portion of the DOM tree based on an expression, Instead of hiding it. The ng-show directive shows or hides the given HTML element based on the expression provided to the ng-show attribute The ng-hide directive shows or hides the given HTML element based on the expression provided to the ng-hide attribute .
ng-if can only render data whenever the condition is true. It doesn’t have any rendered data until the condition is true. ng-show can show and hide the rendered data, that is, it always kept the rendered data and show or hide on the basis of that directives. ng-hide can show and hide the rendered data, that is, it always kept the rendered data and show or hide on the basis of that directives.

Hence, there is a considerable difference between ng-if, ng-show and ng-hide directive which makes them different for their usages .




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.