El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Estils de components

Següent ►
►

En aquest tema, aprendrem com aplicar estils als components d'Angular. Els estils són una part essencial del desenvolupament web, ja que permeten donar una aparença visual atractiva i coherent a les aplicacions. Angular proporciona diverses maneres d'aplicar estils als components, incloent estils en línia, estils en fitxers CSS externs i estils encapsulats.

Continguts

  1. Estils en línia
  2. Estils en fitxers CSS externs
  3. Encapsulament d'estils
  4. Estils globals
  5. Exercicis pràctics

Estils en línia

Els estils en línia es defineixen directament dins del component utilitzant la propietat styles del decorador @Component.

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

@Component({
  selector: 'app-inline-styles',
  template: `<h1>Hola, Angular!</h1>`,
  styles: [`
    h1 {
      color: blue;
      font-size: 24px;
    }
  `]
})
export class InlineStylesComponent {}

Avantatges

  • Fàcil d'implementar per a estils simples i ràpids.
  • Els estils estan encapsulats dins del component.

Desavantatges

  • Pot resultar en codi desordenat si els estils són complexos.
  • Difícil de mantenir i reutilitzar.

Estils en fitxers CSS externs

Els estils també es poden definir en fitxers CSS externs i referenciar-los en el component utilitzant la propietat styleUrls.

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

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

external-styles.component.css

h1 {
  color: green;
  font-size: 24px;
}

Avantatges

  • Millor organització del codi.
  • Fàcil de mantenir i reutilitzar estils.
  • Separació clara entre la lògica del component i els estils.

Desavantatges

  • Pot requerir més configuració inicial.

Encapsulament d'estils

Angular encapsula els estils per defecte, de manera que els estils definits en un component no afecten altres components. Això es fa mitjançant l'ús de l'atribut [_ngcontent-*] en els elements HTML.

Modes d'encapsulament

  1. Emulated (per defecte): Utilitza atributs per encapsular estils.
  2. None: No encapsula els estils, fent-los globals.
  3. ShadowDom: Utilitza Shadow DOM per encapsular estils (només en navegadors que ho suporten).
import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-encapsulation',
  template: `<h1>Hola, Angular!</h1>`,
  styles: [`
    h1 {
      color: red;
      font-size: 24px;
    }
  `],
  encapsulation: ViewEncapsulation.Emulated // Can be None or ShadowDom
})
export class EncapsulationComponent {}

Estils globals

Els estils globals s'apliquen a tota l'aplicació i es defineixen en fitxers CSS que es carreguen en el fitxer angular.json.

styles.css

body {
  font-family: Arial, sans-serif;
}

h1 {
  color: purple;
}

angular.json

{
  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "src/styles.css"
            ]
          }
        }
      }
    }
  }
}

Avantatges

  • Fàcil d'aplicar estils comuns a tota l'aplicació.
  • Ideal per a estils de disseny global com fonts i colors.

Desavantatges

  • Pot interferir amb els estils encapsulats dels components.

Exercicis pràctics

Exercici 1: Estils en línia

  1. Crea un nou component anomenat InlineStyleExample.
  2. Defineix un estil en línia que faci que el text <p>Hola, món!</p> sigui de color blau i tingui una mida de font de 20px.

Solució:

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

@Component({
  selector: 'app-inline-style-example',
  template: `<p>Hola, món!</p>`,
  styles: [`
    p {
      color: blue;
      font-size: 20px;
    }
  `]
})
export class InlineStyleExampleComponent {}

Exercici 2: Estils en fitxers CSS externs

  1. Crea un nou component anomenat ExternalStyleExample.
  2. Defineix un fitxer CSS extern que faci que el text <p>Hola, món!</p> sigui de color verd i tingui una mida de font de 18px.

Solució:

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

@Component({
  selector: 'app-external-style-example',
  template: `<p>Hola, món!</p>`,
  styleUrls: ['./external-style-example.component.css']
})
export class ExternalStyleExampleComponent {}

external-style-example.component.css

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

Exercici 3: Encapsulament d'estils

  1. Crea un nou component anomenat EncapsulationExample.
  2. Defineix estils encapsulats que facin que el text <p>Hola, món!</p> sigui de color vermell i tingui una mida de font de 22px.

Solució:

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

@Component({
  selector: 'app-encapsulation-example',
  template: `<p>Hola, món!</p>`,
  styles: [`
    p {
      color: red;
      font-size: 22px;
    }
  `],
  encapsulation: ViewEncapsulation.Emulated // Can be None or ShadowDom
})
export class EncapsulationExampleComponent {}

Conclusió

En aquesta secció, hem après com aplicar estils als components d'Angular utilitzant estils en línia, estils en fitxers CSS externs i estils encapsulats. També hem vist com definir estils globals per a tota l'aplicació. Els exercicis pràctics ens han ajudat a consolidar aquests conceptes. En la següent secció, explorarem com els components poden interactuar entre ells.

◄ Anterior
◄
Següent ►
►

Curs d'Angular

Mòdul 1: Introducció a Angular

Mòdul 2: Components d'Angular

Mòdul 3: Enllaç de dades i directives

Mòdul 4: Serveis i injecció de dependències

Mòdul 5: Enrutament i navegació

Mòdul 6: Formularis a Angular

Mòdul 7: Client HTTP i observables

Mòdul 8: Gestió d'estat

Mòdul 9: Proves a Angular

Mòdul 10: Conceptes avançats d'Angular

Mòdul 11: Desplegament i millors pràctiques

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats