What is the Difference between ng-show / ng-hide and ng-if directives?

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 .

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.

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.