Els components són la pedra angular d'una aplicació Angular. Cada component encapsula una part de la interfície d'usuari (UI) i la seva lògica associada. En aquest tema, aprendrem com crear components en Angular, com estructurar-los i com utilitzar-los en una aplicació.

• Entendre què és un component en Angular.
• Aprendre a crear un component nou.
• Comprendre l'estructura d'un component.
• Utilitzar components dins d'altres components.

Un component en Angular és una classe TypeScript que conté la lògica de la UI i està associada amb una plantilla HTML i opcionalment amb estils CSS. Cada component té un selector que permet inserir-lo en altres plantilles.

Angular CLI (Command Line Interface) facilita la creació de components. Per generar un component nou, utilitza el següent comandament:

Per exemple, per crear un component anomenat hello-world, executa:

Aquest comandament crearà quatre fitxers nous en una carpeta anomenada hello-world:

• hello-world.component.ts: La classe del component.
• hello-world.component.html: La plantilla HTML del component.
• hello-world.component.css: Els estils CSS del component.
• hello-world.component.spec.ts: Fitxer de proves unitàries per al component.

Després de generar el component, revisem l'estructura del fitxer hello-world.component.ts:

• @Component Decorator: Defineix el component i les seves metadades.
  • selector: El nom del component que s'utilitzarà en les plantilles HTML.
  • templateUrl: La ruta al fitxer HTML del component.
  • styleUrls: La ruta al fitxer CSS del component.

Per utilitzar el component HelloWorldComponent en una altra plantilla, simplement afegeix el seu selector en el fitxer HTML de la plantilla pare:

Suposem que volem crear un component que mostri un missatge de benvinguda. Seguim els passos següents:

1. Generem el component:

2. Editem el fitxer welcome.component.ts per afegir una propietat message:

3. Editem el fitxer welcome.component.html per mostrar el missatge:

4. Utilitzem el component WelcomeComponent en la plantilla principal app.component.html:

Objectiu: Crear un component que mostri una llista d'elements.

1. Genera un component anomenat item-list.
2. Afegeix una propietat items en la classe del component que sigui una llista de cadenes.
3. Mostra la llista d'elements en la plantilla HTML utilitzant la directiva *ngFor.

Solució:

1. Genera el component:

2. Editem el fitxer item-list.component.ts:

3. Editem el fitxer item-list.component.html:

4. Utilitzem el component ItemListComponent en la plantilla principal app.component.html:

En aquesta secció, hem après què és un component en Angular, com crear-ne un de nou utilitzant Angular CLI, i com utilitzar-lo en altres plantilles. També hem vist un exemple pràctic i hem realitzat un exercici per reforçar els conceptes apresos. Els components són fonamentals per a la construcció d'aplicacions Angular modulars i reutilitzables. En la següent secció, explorarem les plantilles de components en més detall.