Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Difference between ng-show/ng-hide and ng-if

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 116
    Comment on it

    ng-show/ng-hide and ng-if are directives of angularjs which are used to check if an expression is true or false and after checking the expression, it shows /hides or removes/recreates the DOM element.

    Though the visual effect of both directives are same, the DOM functionality is completely different.

    Here is the functionality of both directives

    ng-show/ng-hide: - It does not remove the element from DOM. It only hides or shows the element in DOM. To show an element, it removes ng-hide css from the element and to hide the element, it adds the ng-hide class on element. The scope of the element will remain intact when we use ng-hide/ng-show. Here are few examples of these directives

    Syntax

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

    Use

    <div ng-show="showDiv">

    In the above example, the div will only appear when the showDiv scope variable value will be true otherwise ng-hide css will be added to the div and div will not appear on DOM

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

    Use

    <div ng-hide="hideDiv">

    In the above example, the div will only appear when the hideDiv scope variable value will be true otherwise ng-hide css will be removed from div and div will appear on DOM

    ng-if: - ng-if creates or removes an element from DOM on basis of an expression. It creates/removes the child scope of the element on basis of the value of expression. Since it creates/removes the element completely from the DOM, the child scope of the element is also recreated/removed.

    Syntax

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

    Use

    <div ng-if="showDiv">

    In the above example, the div will only appear when the showDiv scope variable value will be true otherwise div will be removed from DOM.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: