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

Angular permite definir estilos directamente en los componentes utilizando las propiedades styles y styleUrls del decorador @Component. Estas propiedades permiten incluir estilos en línea o referenciar archivos CSS externos, respectivamente.

Ejemplo Básico

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

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

En este ejemplo, el estilo color: blue; se aplica al elemento <h1> dentro del componente MyComponent.

Aplicación de Estilos en Componentes

Usando styles

La propiedad styles permite definir estilos en línea dentro del decorador @Component.

@Component({
  selector: 'app-inline-styles',
  template: `<p>Este es un párrafo estilizado en línea.</p>`,
  styles: [`
    p {
      font-size: 20px;
      color: green;
    }
  `]
})
export class InlineStylesComponent {}

Usando styleUrls

La propiedad styleUrls permite referenciar uno o más archivos CSS externos.

@Component({
  selector: 'app-external-styles',
  template: `<p>Este es un párrafo estilizado externamente.</p>`,
  styleUrls: ['./external-styles.component.css']
})
export class ExternalStylesComponent {}

Y en el archivo external-styles.component.css:

p {
  font-size: 20px;
  color: red;
}

Encapsulación de Estilos

Angular proporciona diferentes estrategias de encapsulación de estilos a través de la propiedad encapsulation del decorador @Component. Las opciones disponibles son:

  • ViewEncapsulation.Emulated (por defecto)
  • ViewEncapsulation.None
  • ViewEncapsulation.ShadowDom

ViewEncapsulation.Emulated

Esta es la estrategia por defecto. Emula el comportamiento del Shadow DOM, encapsulando los estilos de manera que solo afecten al componente.

ViewEncapsulation.None

Desactiva la encapsulación, permitiendo que los estilos definidos en el componente afecten a toda la aplicación.

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

@Component({
  selector: 'app-no-encapsulation',
  template: `<p>Sin encapsulación.</p>`,
  styles: [`
    p {
      color: purple;
    }
  `],
  encapsulation: ViewEncapsulation.None
})
export class NoEncapsulationComponent {}

ViewEncapsulation.ShadowDom

Utiliza el Shadow DOM nativo para encapsular los estilos, proporcionando un verdadero aislamiento de los estilos.

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

@Component({
  selector: 'app-shadow-dom',
  template: `<p>Encapsulación con Shadow DOM.</p>`,
  styles: [`
    p {
      color: orange;
    }
  `],
  encapsulation: ViewEncapsulation.ShadowDom
})
export class ShadowDomComponent {}

Uso de Preprocesadores CSS

Angular soporta el uso de preprocesadores CSS como Sass, Less y Stylus. Para utilizar Sass, por ejemplo, simplemente cambia la extensión del archivo de estilos a .scss y Angular lo procesará automáticamente.

Ejemplo con Sass

@Component({
  selector: 'app-sass-styles',
  template: `<p>Estilizado con Sass.</p>`,
  styleUrls: ['./sass-styles.component.scss']
})
export class SassStylesComponent {}

Y en el archivo sass-styles.component.scss:

$p-color: pink;

p {
  color: $p-color;
  font-size: 18px;
}

Ejercicio Práctico

Ejercicio

  1. Crea un nuevo componente llamado StyledComponent.
  2. Aplica estilos en línea para cambiar el color del texto a azul y el tamaño de la fuente a 24px.
  3. Crea un archivo CSS externo para el componente y define un estilo que cambie el fondo del componente a gris claro.
  4. Cambia la estrategia de encapsulación a ViewEncapsulation.None y observa cómo los estilos afectan a otros componentes.

Solución

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

@Component({
  selector: 'app-styled-component',
  template: `<div>
               <h2>Componente Estilizado</h2>
               <p>Este es un párrafo dentro del componente estilizado.</p>
             </div>`,
  styles: [`
    h2 {
      color: blue;
      font-size: 24px;
    }
  `],
  styleUrls: ['./styled-component.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class StyledComponent {}

Y en el archivo styled-component.component.css:

div {
  background-color: lightgray;
}

Conclusión

En esta sección, hemos aprendido cómo aplicar estilos a los componentes en Angular utilizando tanto estilos en línea como archivos CSS externos. También hemos explorado las diferentes estrategias de encapsulación de estilos y cómo utilizar preprocesadores CSS como Sass. Estos conocimientos son fundamentales para crear aplicaciones Angular con una apariencia visual consistente y mantenible.

En la próxima sección, exploraremos la interacción entre componentes, lo que nos permitirá construir aplicaciones más dinámicas y modulares.

◄ Anterior
◄
Siguiente ►
►

Curso de Angular 2+

Módulo 1: Introducción a Angular

Módulo 2: Conceptos Básicos de TypeScript

Módulo 3: Componentes y Plantillas

Módulo 4: Directivas y Pipes

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

Módulo 6: Enrutamiento y Navegación

Módulo 7: Formularios en Angular

Módulo 8: Cliente HTTP y Observables

Módulo 9: Gestión de Estado

Módulo 10: Pruebas en Angular

Módulo 11: Temas Avanzados

Módulo 12: Despliegue y Mejores Prácticas

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