angular - conditionally displaying of html blocks

angular-ng-hide-ng-if

In AngularJS, you have several ways to display/hide some HTML block.
I'll mention most common one, and point out main differencies between them.

1.  ng-hide/ng-show: By using these two directives, you can hide or show html block, by simple passing expression. Example:

      <div ng-hide='checked' > Hide me, if checked is true </div>
    
2.  another way of doing same thing, is to use ng-class. You can conditionally apply some class to HTML block, and by doing that, hide or show it.

    
       <div ng-class="{'hidden': isSomethingTrue()}"> Hide me, if Something is true </div>
    
    You can use ng-class as attribute, or as a class.
    
    
3. Using ng-if. IMPORTANT NOTE: Main difference between ng-if and two cases above (when speaking about hiding HTML blocks), is that ng-if will not render HTML block if condition is not satisfied, while two above will render (but show hidden).

        <div ng-if="isThisVisible">
          Display me only if condition is met (isThisVisible is true)
        </div>