I’m not talking about this - in a real world scenario it’s pretty common to have teams with both developers and designers, i.e. the chances that this style could be overridden by someone are good.
Just to make sure that we’re on the same page -
hidden is not an equivalent of
ng-show (from Angular 1):
At first glance, binding to the
hidden property seems like the closest cousin to Angular 1’s
ng-show. However, there is one “
!important” difference -
ng-hide both manage visibility by toggling an “ng-hide” CSS class on the element, which simply sets the
display property to “
none” when applied. Crucially, Angular controls this style and postscripts it with “
!important” to ensure it always overrides any other display styles set on that element.
From the quote above is clear that when using
hidden you’re depending on both the browser-specific implementation and the styles that may take effect on this element. For a very simple app (like the example above) it might be perfectly OK. However I would probably consider implementing an equivalent of
ng-hide directive for a more complex one.
The question here is about Angular 2 and IMHO comparing Angular 1 to Angular 2 is like comparing apples to oranges - beyond the name and the team behind them, they are pretty different in many aspects. Moreover Angular 2 is a few times faster. In my experience using
*ngIf for single elements on a simple page makes no difference - in a more complex scenario however this should be taken into consideration.
I guess that everyone has own preference on this topic and there’s no best practice advice that would cover all cases, that’s why I believe that the most important thing is to know the pros/cons and take the decision on a per-case basis.