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.
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”
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>
