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.
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 ?
ResponderEliminarBuenas tardes, porqué usas [style.fontSize.px] en lugar de [ngStyle]?
ResponderEliminar