¿Cuál es el equivalente de ngShow y ngHide en Angular 2+?
Tengo una serie de elementos que quiero que sean visibles bajo ciertas condiciones.
En AngularJS escribiría
<div ng-show="myVar">stuff</div>
¿Cómo puedo hacer esto en Angular 2+?
La hiddenpropiedad se puede utilizar para eso.
[hidden]="!myVar"
Ver también
- https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden
asuntos
hiddenSin embargo, tiene algunos problemas porque puede entrar en conflicto con el CSS de la displaypropiedad.
Vea cómo someen Plunker el ejemplo no se oculta 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.
otro escollo
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 veraz.
Sólo el valor falseo la eliminación del atributo harán que el elemento sea visible.
El uso {{}}también convierte la expresión en una cadena y no funcionará como se esperaba.
Solo el enlace con []funcionará como se esperaba porque falsese asigna como falseen lugar de "false".
*ngIfvs[hidden]
*ngIfelimina efectivamente su contenido del DOM mientras [hidden]modifica la displaypropiedad y solo indica al navegador que no muestre el contenido, pero el DOM aún lo contiene.
Utilice el [hidden]atributo:
[hidden]="!myVar"
O puedes usar*ngIf
*ngIf="myVar"
Estas son dos formas de mostrar/ocultar un elemento. La única diferencia es: *ngIfelimina el elemento del DOM mientras [hidden]le dice al navegador que muestre/oculte un elemento usando displayla propiedad CSS manteniendo el elemento en el 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 tu 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, busqué otra solución sencilla.
[class.is-loading]="isLoading"
donde entonces el CSS es tan simple como
&.is-loading { display: none }
para dejar entonces el estado mostrado manejado por la clase predeterminada.
Lo siento, no estoy de acuerdo con vincular a oculto, lo cual se considera inseguro cuando se usa Angular 2. Esto se debe a que el estilo oculto podría sobrescribirse fácilmente, por ejemplo, usando
display: flex;
El enfoque recomendado es utilizar *ngIf, que es más seguro. Para obtener más detalles, consulte el blog oficial de Angular. 5 errores de novato que se deben evitar con Angular 2
<div *ngIf="showGreeting">
Hello, there!
</div>
