javascript - Cómo establecer ngStyle a un valor predeterminado en Angular

Aquí hay una parte de mi HTML:

<div class="container"> 

Y aquí está la parte relacionada de CSS:

.container{
width:100%;
height: 45px;}

@media (min-width: 768px) { 
.container{
height:60px;}

Ahora quiero enlazar el estilo de este div a una propiedad mediante ngStyle. Tengo una propiedad en app.component.ts llamada isShrinked, y cuando isShrinked===true, me gustaría que la altura del div fuera de 10px, de lo contrario, la altura sería el valor predeterminado establecido por el estilo CSS de la clase container.

Ahora leo la documentación de Angular sobre ngStyle, pero no puedo encontrar la sintaxis correcta para lograr esto. Lo más cercano que puedo hacer es agregar algo como [ngStyle]="{'height': isShrinked?'10px':''}" Pero esto obviamente no funciona, ya que tendría que dar un valor al lado derecho de esta expresión ternaria, lo cual no es lo que pretendo hacer.

¿Alguien puede ayudarme?

Respuesta #1

Las siguientes sintaxis deberían funcionar:

[ngStyle]="isShrinked ? { 'height': '10px' } : {}"
[ngStyle]="isShrinked ? { 'height': '10px' } : null"

Si solo se va a establecer un atributo de estilo, se puede obtener el mismo resultado con esta vinculación de estilo específica:

[style.height.px]="isShrinked ? 10 : null"

Mira este stackblitz para una demostración.