Ng-hide vs display:none on header


Just noticed that if we place an ng-hide="true" on a header element, the header hides completely but if I don’t want to use ng-hide and instead give display:none on the header class, there is a white space instead of the header, and the rest of the screen does not move up.

As far as I know, ng-hide also does display:none on the inside, so why the anomaly?

This can be tried on any codepen that has a header.

Ion-content has a watch on it to see if an ion-header is there. Since using just css, it doesn’t get evaluated by angular, so ion-content doesn’t get notified.