El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

Els components són la pedra angular d'Angular. Cada aplicació Angular està composta per una col·lecció de components que defineixen les vistes i la lògica associada. En aquesta secció, explorarem què són els components, com funcionen i com es relacionen entre ells.

Què és un component?

Un component en Angular és una classe TypeScript que està decorada amb el decorador @Component. Aquesta classe defineix la lògica de la vista i la seva interacció amb el model de dades. Cada component té:

Selector: Un nom que identifica el component en una plantilla HTML.
Plantilla: HTML que defineix la vista del component.
Estils: CSS que s'aplica a la vista del component.
Lògica: Codi TypeScript que defineix el comportament del component.

Estructura d'un component

A continuació, es mostra un exemple bàsic d'un component Angular:

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

@Component({
  selector: 'app-exemple',
  template: `
    <h1>{{ title }}</h1>
    <p>Benvingut al nostre primer component!</p>
  `,
  styles: [`
    h1 {
      color: blue;
    }
  `]
})
export class ExempleComponent {
  title = 'Hola, Angular!';
}

Explicació del codi

Importació del decorador @Component: El decorador @Component s'importa des del paquet @angular/core.
Decorador @Component: Defineix el selector, la plantilla i els estils del component.
- selector: El nom del component que s'utilitzarà en les plantilles HTML (<app-exemple></app-exemple>).
- template: El codi HTML que defineix la vista del component.
- styles: Els estils CSS que s'apliquen a la vista del component.
Classe ExempleComponent: Defineix la lògica del component. En aquest cas, només té una propietat title.

Cicle de vida dels components

Els components Angular tenen un cicle de vida que inclou diverses etapes des de la creació fins a la destrucció. Aquestes etapes es poden gestionar mitjançant els mètodes del cicle de vida:

ngOnInit: S'executa una vegada que Angular ha inicialitzat totes les propietats del component.
ngOnChanges: S'executa quan es detecten canvis en les propietats d'entrada del component.
ngDoCheck: S'executa en cada canvi de detecció.
ngAfterContentInit: S'executa després que Angular hagi projectat el contingut en el component.
ngAfterContentChecked: S'executa després de cada comprovació del contingut projectat.
ngAfterViewInit: S'executa després que Angular hagi inicialitzat les vistes del component.
ngAfterViewChecked: S'executa després de cada comprovació de les vistes del component.
ngOnDestroy: S'executa just abans que Angular destrueixi el component.

Exemple d'ús dels mètodes del cicle de vida

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

@Component({
  selector: 'app-cicle-vida',
  template: `
    <p>Component amb cicle de vida</p>
  `
})
export class CicleVidaComponent implements OnInit, OnDestroy {

  constructor() {
    console.log('Constructor: El component s\'ha creat');
  }

  ngOnInit() {
    console.log('ngOnInit: El component s\'ha inicialitzat');
  }

  ngOnDestroy() {
    console.log('ngOnDestroy: El component es destruirà');
  }
}

Exercici pràctic

Objectiu

Crear un component nou que mostri un missatge de benvinguda i canviï el color del text quan es faci clic en un botó.

Passos

Crear el component:
- Utilitza Angular CLI per crear un nou component anomenat benvinguda.
```
ng generate component benvinguda
```
Modificar la plantilla del component:
- Edita el fitxer benvinguda.component.html per afegir un missatge de benvinguda i un botó.
```
<h1 [style.color]="color">{{ missatge }}</h1>
<button (click)="canviarColor()">Canviar color</button>
```

Afegir la lògica del component:

Edita el fitxer benvinguda.component.ts per definir la lògica del component.

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

@Component({
  selector: 'app-benvinguda',
  templateUrl: './benvinguda.component.html',
  styleUrls: ['./benvinguda.component.css']
})
export class BenvingudaComponent {
  missatge = 'Benvingut a Angular!';
  color = 'black';

  canviarColor() {
    this.color = this.color === 'black' ? 'red' : 'black';
  }
}

Afegir estils (opcional):
- Edita el fitxer benvinguda.component.css per afegir estils personalitzats.
```
h1 {
  font-family: Arial, sans-serif;
}

button {
  margin-top: 10px;
}
```

Solució

El component benvinguda hauria de semblar-se a això:

benvinguda.component.html:

<h1 [style.color]="color">{{ missatge }}</h1>
<button (click)="canviarColor()">Canviar color</button>

benvinguda.component.ts:

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

@Component({
  selector: 'app-benvinguda',
  templateUrl: './benvinguda.component.html',
  styleUrls: ['./benvinguda.component.css']
})
export class BenvingudaComponent {
  missatge = 'Benvingut a Angular!';
  color = 'black';

  canviarColor() {
    this.color = this.color === 'black' ? 'red' : 'black';
  }
}

benvinguda.component.css (opcional):

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

button {
  margin-top: 10px;
}

Conclusió

En aquesta secció, hem après què són els components en Angular, com es defineixen i com funcionen. També hem explorat el cicle de vida dels components i hem creat un component pràctic per reforçar els conceptes apresos. En la següent secció, veurem com crear components nous i com utilitzar-los en les nostres aplicacions Angular.

Comprendre els components

Què és un component?

Estructura d'un component

Explicació del codi

Cicle de vida dels components

Exemple d'ús dels mètodes del cicle de vida

Exercici pràctic

Objectiu

Passos

Solució

Conclusió

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