visibility:hidden in Angular 2

问题:

What's the suggested way to achieve element invisibility in angular 2 (visibility:hidden not showing the element but keeping it space occupied)?. It have a [hide] directive but it seems to be similar to a display:none

回答1:

You can set the visibility style attribute with style binding:

<div [style.visibility]="'hidden'"></div>
<div [style.visibility]="isDivVisible ? 'visible' : 'hidden'"></div>

An example is shown in this plunker.

回答2:

You also can use the ability of angular to dynamically inspect your property and refresh DOM with NgStyle:

<div [ngStyle]="{'visibility':isDivVisible ? 'visible' : 'hidden'}"></div>

回答3:

You can do ngIf if you don't want your component to be rendered in the DOM.

If you want that component to be rendered but not shown you can just set display to none based on a condition with NgClass. But be aware that this may lead to some buggy behavior try always using ngIf

回答4:

Try ngShow.

<div ng-show="myValue"></div>

Hide element from controller :

$scope.myValue = false