Tripat Bala Singh
What is the Difference between ng-show / ng-hide and ng-if directives?
By Tripat Bala Singh in Angular on Mar 06 2018
  • Prashanth Kumar
    Mar, 2018 29

    1) The ng-if directive removes or recreates a portion of the DOM tree based on an expression. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM. 2)The ng-show directive shows or hides the given HTML element based on the expression provided to the ng-show attribute 3)ng-hide for hide the elements conditionally.For example if we want to hide a div based on a condition then we need to pass a boolean expression to ng-hide directive.

    • 2
  • Mahesh Verma
    Mar, 2018 13

    ng-show/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. However, ng-if can only render data whenever the condition is true. It doesn't have any rendered data until the condition is true.We can say, ng-show/hide internally kept data but cannot display on UI, however, ng-if cannot keep data until the condition is true.

    • 2
  • Bhairab Dutt
    May, 2018 8

    The ng-show and ng-hide both are directive . The difference between is : ng-show directive will show the html element if expression resilts is true and ng-hide directive hide the html element if expression result is true .

    • 0

Most Popular Job Functions