La propiedad hidden se puede usar para eso.

 [hidden]="!myVar"

Ver también

• https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden

cuestiones

Sin embargo, hidden tiene algunos problemas porque puede entrar en conflicto con CSS para la propiedad de display .

Vea cómo some en el ejemplo de Plunker no se ocultan porque tiene un estilo

 :host {display: block;}

colocar. (Esto podría comportarse de manera diferente en otros navegadores; lo probé con Chrome 50)

solución alterna

Puedes arreglarlo agregando

 [hidden] { display: none !important;}

A un estilo global en index.html .

otra trampa

 hidden="false" hidden="{{false}}" hidden="{{isHidden}}" // isHidden = false;

son los mismos que

 hidden="true"

y no mostrará el elemento.

hidden="false" asignará la cadena "false" que se considera verdadera.
Solo el valor false o la eliminación del atributo harán que el elemento sea realmente visible.

El uso de {{}} también convierte la expresión en una cadena y no funcionará como se esperaba.

Solo el enlace con [] funcionará como se esperaba porque este false se asigna como false en lugar de "false" .

*ngIf vs [hidden]

*ngIf elimina efectivamente su contenido del DOM mientras que [hidden] modifica la propiedad de display y solo le indica al navegador que no muestre el contenido, pero el DOM aún lo contiene.

Utilice el atributo [hidden] :

 [hidden]="!myVar"

O puedes usar *ngIf

 *ngIf="myVar"

Estas son dos formas de mostrar/ocultar un elemento. La única diferencia es: *ngIf eliminará el elemento de DOM mientras que [hidden] le indicará al navegador que muestre/oculte un elemento usando la propiedad de display CSS manteniendo el elemento en DOM.

Me encuentro en la misma situación con la diferencia de que en mi caso el elemento era un contenedor flexible. Si no es su caso, podría ser una solución fácil

 [style.display]="!isLoading ? 'block' : 'none'"

en mi caso, debido al hecho de que muchos de los navegadores que admitimos todavía necesitan el prefijo del proveedor para evitar problemas, opté por otra solución fácil

 [class.is-loading]="isLoading"

donde entonces el CSS es simple como

 &.is-loading { display: none }

para dejar entonces el estado mostrado manejado por la clase por defecto.