domingo, 4 de noviembre de 2018

Angular: 20. Cambiar estilo CSS de un elemento dinámicamente

Podemos cambiar el estilo de un elemento dinámicamente. Veamos cómo hacerlo:

Creamos un proyecto nuevo. Luego creamos un componente, que llamaremos "ngStyle".
Modificamos el TypeScript del componente simplemente añadiendo una variable "numero" de valor 10, como sigue:


Ahora modificamos el html del componente como sigue:


Como se puede ver, creamos un párrafo al que añadimos "[style.fontSize.px]="tamano"".
Con esto estamos indicando que Angular se encargará de tratar el tamaño en píxeles del contenido del párrafo, y que éste será igual a la variable "tamano" del TypeScript.

Después tenemos dos botones a los que hemos añadido una función "click" que se encargará de aumentar o disminuir el valor de la variable "tamano" en 5 cada vez que hagamos click en ellos.

Por último, añadimos la etiqueta de nuestro componente  en el "app.component.html", como sigue:


Al levantar la aplicación, se muestra como sigue:


Ahora si hacemos click en el botón de más, aumentará el tamaño de letra del párrafo, y disminuirá si pulsamos en el botón de menos.

Y eso es todo.

2 comentarios:

  1. Buen aporte muchas gracias me sirvio muchisimo pero tengo una duda, como puedo aplicar esto a una imagen, lo que quiero es ampliar cierta parte de la imagen como si estuviera haciendo un zoom ?

    ResponderEliminar
  2. Buenas tardes, porqué usas [style.fontSize.px] en lugar de [ngStyle]?

    ResponderEliminar