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 propietattitle
.
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
- Utilitza Angular CLI per crear un nou component anomenat
-
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>
- Edita el fitxer
-
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'; } }
- Edita el fitxer
-
Afegir estils (opcional):
- Edita el fitxer
benvinguda.component.css
per afegir estils personalitzats.
h1 { font-family: Arial, sans-serif; } button { margin-top: 10px; }
- Edita el fitxer
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):
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.
Curs d'Angular
Mòdul 1: Introducció a Angular
- Què és Angular?
- Configuració de l'entorn de desenvolupament
- Arquitectura d'Angular
- Primera aplicació Angular
Mòdul 2: Components d'Angular
- Comprendre els components
- Crear components
- Plantilles de components
- Estils de components
- Interacció de components
Mòdul 3: Enllaç de dades i directives
- Interpolació i enllaç de propietats
- Enllaç d'esdeveniments
- Enllaç de dades bidireccional
- Directives integrades
- Directives personalitzades
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
- Introducció al client HTTP
- Fer sol·licituds HTTP
- Gestionar respostes HTTP
- Utilitzar observables
- Gestió d'errors
Mòdul 8: Gestió d'estat
- Introducció a la gestió d'estat
- Utilitzar serveis per a la gestió d'estat
- NgRx Store
- NgRx Effects
- NgRx Entity
Mòdul 9: Proves a Angular
- Proves unitàries
- Proves de components
- Proves de serveis
- Proves de cap a cap
- Simulació de dependències
Mòdul 10: Conceptes avançats d'Angular
- Angular Universal
- Optimització del rendiment
- Internacionalització (i18n)
- Tubs personalitzats
- Animacions d'Angular