El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Estilos de Componentes

Siguiente ►
►

En Angular, los estilos de componentes permiten definir la apariencia visual de los componentes de manera modular y encapsulada. Esto significa que los estilos aplicados a un componente no afectarán a otros componentes, lo que facilita el mantenimiento y la escalabilidad de las aplicaciones.

Contenido

  1. Introducción a los Estilos de Componentes
  2. Aplicación de Estilos en Componentes
  3. Encapsulación de Estilos
  4. Uso de Preprocesadores CSS
  5. Ejercicio Práctico
  6. Conclusión

Introducción a los Estilos de Componentes

Los estilos de componentes en Angular se definen dentro del propio componente, lo que permite una mejor organización y encapsulación. Los estilos pueden ser definidos directamente en el archivo del componente o en archivos CSS externos.

Aplicación de Estilos en Componentes

Estilos en Línea

Puedes definir estilos directamente en el archivo del componente utilizando la propiedad styles del decorador @Component.

import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `<h1>Hola, Angular!</h1>`,
  styles: [`
    h1 {
      color: blue;
    }
  `]
})
export class MyComponent {}

Estilos en Archivos Externos

También puedes definir estilos en archivos CSS externos y referenciarlos en el componente utilizando la propiedad styleUrls.

import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `<h1>Hola, Angular!</h1>`,
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {}

Archivo my-component.component.css:

h1 {
  color: blue;
}

Encapsulación de Estilos

Angular proporciona diferentes modos de encapsulación de estilos que determinan cómo se aplican los estilos a los componentes.

ViewEncapsulation.Emulated (Por Defecto)

Este es el modo de encapsulación por defecto. Los estilos se aplican solo al componente y no afectan a otros componentes.

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `<h1>Hola, Angular!</h1>`,
  styles: [`
    h1 {
      color: blue;
    }
  `],
  encapsulation: ViewEncapsulation.Emulated
})
export class MyComponent {}

ViewEncapsulation.None

Los estilos se aplican globalmente, afectando a todos los componentes.

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `<h1>Hola, Angular!</h1>`,
  styles: [`
    h1 {
      color: blue;
    }
  `],
  encapsulation: ViewEncapsulation.None
})
export class MyComponent {}

ViewEncapsulation.ShadowDom

Utiliza la tecnología Shadow DOM para encapsular los estilos, asegurando que no afecten a otros componentes.

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `<h1>Hola, Angular!</h1>`,
  styles: [`
    h1 {
      color: blue;
    }
  `],
  encapsulation: ViewEncapsulation.ShadowDom
})
export class MyComponent {}

Uso de Preprocesadores CSS

Angular permite el uso de preprocesadores CSS como Sass, Less y Stylus para escribir estilos más avanzados y organizados.

Configuración de Sass

Para usar Sass en un componente, simplemente cambia la extensión del archivo de estilos a .scss y Angular lo reconocerá automáticamente.

import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `<h1>Hola, Angular!</h1>`,
  styleUrls: ['./my-component.component.scss']
})
export class MyComponent {}

Archivo my-component.component.scss:

$primary-color: blue;

h1 {
  color: $primary-color;
}

Ejercicio Práctico

Ejercicio 1: Aplicar Estilos a un Componente

  1. Crea un nuevo componente llamado app-styled-component.
  2. Define un archivo de estilos externo app-styled-component.component.css.
  3. Aplica los siguientes estilos:
    • El texto del componente debe ser de color verde.
    • El fondo del componente debe ser de color gris claro.

Solución

  1. Crear el componente:
ng generate component app-styled-component
  1. Editar el archivo app-styled-component.component.html:
<div class="styled-component">
  <h1>Componente con Estilos</h1>
</div>
  1. Editar el archivo app-styled-component.component.css:
.styled-component {
  background-color: lightgray;
}

.styled-component h1 {
  color: green;
}
  1. Asegurarse de que el componente esté referenciado en el módulo principal (app.module.ts).

Conclusión

En esta sección, hemos aprendido cómo aplicar estilos a los componentes en Angular utilizando diferentes métodos y modos de encapsulación. También hemos explorado el uso de preprocesadores CSS para escribir estilos más avanzados. Con estos conocimientos, puedes crear componentes visualmente atractivos y bien organizados en tus aplicaciones Angular.

En el próximo tema, exploraremos la interacción entre componentes, lo que te permitirá crear aplicaciones más dinámicas y modulares.

◄ Anterior
◄
Siguiente ►
►

Curso de Angular

Módulo 1: Introducción a Angular

Módulo 2: Componentes de Angular

Módulo 3: Enlace de Datos y Directivas

Módulo 4: Servicios e Inyección de Dependencias

Módulo 5: Enrutamiento y Navegación

Módulo 6: Formularios en Angular

Módulo 7: Cliente HTTP y Observables

Módulo 8: Gestión de Estado

Módulo 9: Pruebas en Angular

Módulo 10: Conceptos Avanzados de Angular

Módulo 11: Despliegue y Mejores Prácticas

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados