angular tutorial

Angular 5 – css por componente y método ngstyle

Crear css por componente en angular y uso de ngstyle

Ngstyle y css individuales es algo que me ha gustado de angular (1 al 5 ) , es decir tenemos un css principal que encontraremos en la raíz del proyecto como style.css, pero cada vez que creamos un componente con angular cli nos crea un archivo css, esto es para uso individual.

Sobre-escribir un estilo

Vamos a usar un ejemplo sencillo, digamos que usamos la etiqueta section para colocar nuestros contenidos, entonces en style.css colocamos lo siguiente.

section{

Width: 100%;

backgraud-color: red;

}

En el proyecto , cree un componente que se llama home y este contiene el archivo css, en este archivo vamos a sobreescribir el método:

section{

Width: 80%;

backgraud-color: blue;

}

Si corremos nuestro proyecto vamos s ver qué nuestro section es azul, esto se debe a que crea estilos y lo inyecta en el componente directamente, creando clases únicas.

clases unicas

La restricción de estas clases son que no puede modificar el estilo de elementos padre, es decir que no modificará las etiquetas html o body.

De ahí todo lo que esté dentro de esta etiqueta es modificado, una de las ventajas es que podemos crear estilos muy distintos y sin afectar a toda la página.

No olviden que todos los css se concentran en un solo archivo al compilar angular, esto hace que sea mas rápida la carga.

Animaciones y cache

Existen muchas ventajas al usar css por componentes en angular pero hay un problema que detecte al usar animaciones, si nuestras animaciones lo llamamos con el mismo nombre, aunque si lo hace al cambiar a otro componente con el mismo nombre, el cache no sobrescribe si que puede equivocarse de animación, mi recomendación es llamarles distintos.

Usando ngStyle en vez de la etiqueta style

Muchas veces acostumbramos a poner a una etiqueta style y una nueva propiedad en javascript o jquery, para hacer un cambio de estilo , modificando el dom y así dar una apariencia mas dinámica.

NgStyle puede hacer una evaluación para decidir una modificación del dom o simplemente agregar un nuevo estilo.

A estos métodos se llaman directivas y se colocan directamente al html

<some-element [ngStyle]=”{‘font-style’: styleExp}”>…</some-element>

<some-element [ngStyle]=”{‘max-width.px’: widthExp}”>…</some-element>

<some-element [ngStyle]=”objExp”>…</some-element>

Un ejemplo es que mediante el número de Array que tengo, agrego un delay para la animación haciendo el efecto que aparezca cada uno de forma “individual”

ngstyle

Aquí podemos ver que nos crea una propiedad ng-style y nos dice que es un objeto / array de estilos y en seguida nos coloca uno de nuestros estilos, en este caso yo evaluó cuanta información tiene mi array y esto le agrego un delay.

<div class=”content”>
<divclass=”tecno” *ngFor=”let fend of front; let o = index;” [ngStyle]=”{‘animation-delay’: o*100+’ms’}”>
</div>
</div>
</div>
Como decía anteriormente mi array front lo pongo en un for y también creo una variable llamada “o”, este se llena con la información de la interacción del for (en que vuelta va) y puedo usarlo como indicador para que la animación tenga un retraso.
animacion
en la próxima entrada hablaremos sobre FOR IF y Switch en angular.

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.