Ng-Show & Ng-Hide, what is the difference?

Question

I'm teaching myself Angular-JS and I can't find any sort of definitive answer on what the difference between ng-show and ng-hide is. To me they appear to be functionally equivelant.

I understand the difference between them and ng-if as ng-if actually removes the watchers etc. whereas show and hide seem to serve the same purpose.

Is there any kind of performance gain using one over the other or is there situations where one is preferable over the other OR is it just two sides of the same coin and you use whichever makes more logical sense to you?

Apologies if this has been asked/answered elsewhere but I couldn't find it.

Answer 1

They do the opposite of each other and can be used as you want.

I think this comes down to coding preference, as some people like to write their code so that they use the method if the value is going to be true, instead of using not false!

<div ng-show="true">

instead of :

<div ng-hide="!true">

Answer 2

This directives differs in one row:

ngShowDirective:

    $animate[value ? 'removeClass' : 'addClass'](element, NG_HIDE_CLASS, {
      tempClasses: NG_HIDE_IN_PROGRESS_CLASS
    });

ngHideDirective:

    $animate[value ? 'addClass' : 'removeClass'](element,NG_HIDE_CLASS, {
      tempClasses: NG_HIDE_IN_PROGRESS_CLASS
    });

Just opposite applying of ng-hide CSS class.

---

As you can see, there is NG_HIDE_IN_PROGRESS_CLASS.
It's ng-hide-animate css class which temporary applied in both cases.
You can use it to animate element appear/disappear.
You should use two selectors to implement bidirectional animation:

• .animate-hide for appear
• .animate-hide.ng-hide for hide