Ionic: Manipular los estilos en tiempo de ejecución

Cuando creamos una web o una app móvil con Ionic muchas veces necesitamos cambiar los estilos de un elemento en tiempo de ejecución para cambiar de posición un elemento o cambiar un atributo gráfico.

Para ello utilizamos el tag [ngStyles] y lo asociamos con un método que devolverá los estilos a aplicar.

Os pongo un ejemplo sencillo con Angular, aquí va el HTML:

<div class="item" [ngStyle]="applyStyles()">

Texto de prueba

</div>

Aquí va el javascript de Angular:

applyStyles(){

const styles = {'color': 'blue', 'font-weight': 'bold'};

return styles;

}

Dentro de la función podemos aplicar Javascript para controlar la respuesta que vamos a dar.

Como veis muy útil y práctico.

Espero que os sea de utilidad ^_^.