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

Plantilles de components

Següent ►
►

En aquest tema, aprendrem com crear i utilitzar plantilles de components en Angular. Les plantilles són una part fonamental dels components, ja que defineixen la vista que es renderitzarà a l'usuari. Explorarem com definir plantilles, utilitzar interpolació i vinculació de dades, i com treballar amb directives estructurals per crear vistes dinàmiques.

Continguts

  1. Definició de plantilles
  2. Interpolació
  3. Vinculació de dades
  4. Directives estructurals
  5. Exercicis pràctics
  6. Conclusió

Definició de plantilles

Les plantilles en Angular es defineixen dins dels components. Hi ha dues maneres principals de definir una plantilla:

  1. Inline Template: La plantilla es defineix directament dins del decorador @Component utilitzant la propietat template.
  2. External Template: La plantilla es defineix en un fitxer HTML separat i es refereix a aquest fitxer utilitzant la propietat templateUrl.

Exemple d'Inline Template

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

@Component({
  selector: 'app-inline-template',
  template: `<h1>Hola, {{ nom }}!</h1>`,
})
export class InlineTemplateComponent {
  nom: string = 'Món';
}

Exemple d'External Template

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

@Component({
  selector: 'app-external-template',
  templateUrl: './external-template.component.html',
})
export class ExternalTemplateComponent {
  nom: string = 'Món';
}

external-template.component.html

<h1>Hola, {{ nom }}!</h1>

Interpolació

L'interpolació és una tècnica que permet inserir valors de les propietats del component dins de la plantilla. Es fa servir la sintaxi {{ }}.

Exemple d'Interpolació

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

@Component({
  selector: 'app-interpolacio',
  template: `<p>El meu nom és {{ nom }} i tinc {{ edat }} anys.</p>`,
})
export class InterpolacioComponent {
  nom: string = 'Joan';
  edat: number = 30;
}

Vinculació de dades

La vinculació de dades permet sincronitzar les dades entre el component i la plantilla. Hi ha diversos tipus de vinculació de dades en Angular:

  1. Vinculació unidireccional (de component a plantilla): Utilitza la sintaxi [propietat] per vincular una propietat del component a un atribut HTML.
  2. Vinculació unidireccional (de plantilla a component): Utilitza la sintaxi (event) per capturar esdeveniments de la plantilla i actualitzar les propietats del component.
  3. Vinculació bidireccional: Utilitza la sintaxi [(ngModel)] per sincronitzar les dades entre el component i la plantilla.

Exemple de Vinculació Unidireccional

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

@Component({
  selector: 'app-vinculacio-unidireccional',
  template: `<input [value]="nom" (input)="actualitzarNom($event)" />`,
})
export class VinculacioUnidireccionalComponent {
  nom: string = 'Joan';

  actualitzarNom(event: any) {
    this.nom = event.target.value;
  }
}

Exemple de Vinculació Bidireccional

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

@Component({
  selector: 'app-vinculacio-bidireccional',
  template: `<input [(ngModel)]="nom" /> <p>El teu nom és: {{ nom }}</p>`,
})
export class VinculacioBidireccionalComponent {
  nom: string = 'Joan';
}

Directives estructurals

Les directives estructurals canvien l'estructura del DOM. Les directives més comunes són *ngIf i *ngFor.

Exemple de *ngIf

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

@Component({
  selector: 'app-ngif',
  template: `<p *ngIf="mostrar">Aquest text es mostra si la variable 'mostrar' és certa.</p>`,
})
export class NgIfComponent {
  mostrar: boolean = true;
}

Exemple de *ngFor

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

@Component({
  selector: 'app-ngfor',
  template: `
    <ul>
      <li *ngFor="let element of elements">{{ element }}</li>
    </ul>
  `,
})
export class NgForComponent {
  elements: string[] = ['Element 1', 'Element 2', 'Element 3'];
}

Exercicis pràctics

Exercici 1: Crear una plantilla amb interpolació

Crea un component que mostri el nom i l'edat d'una persona utilitzant interpolació.

Solució:

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

@Component({
  selector: 'app-exercici1',
  template: `<p>El meu nom és {{ nom }} i tinc {{ edat }} anys.</p>`,
})
export class Exercici1Component {
  nom: string = 'Maria';
  edat: number = 25;
}

Exercici 2: Utilitzar vinculació bidireccional

Crea un component amb un camp d'entrada que permeti a l'usuari introduir el seu nom i mostri el nom actualitzat a la pantalla.

Solució:

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

@Component({
  selector: 'app-exercici2',
  template: `<input [(ngModel)]="nom" /> <p>El teu nom és: {{ nom }}</p>`,
})
export class Exercici2Component {
  nom: string = '';
}

Exercici 3: Utilitzar *ngIf i *ngFor

Crea un component que mostri una llista d'elements i un botó per afegir un nou element a la llista. Utilitza *ngIf per mostrar un missatge quan la llista està buida.

Solució:

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

@Component({
  selector: 'app-exercici3',
  template: `
    <button (click)="afegirElement()">Afegir Element</button>
    <p *ngIf="elements.length === 0">No hi ha elements a la llista.</p>
    <ul>
      <li *ngFor="let element of elements">{{ element }}</li>
    </ul>
  `,
})
export class Exercici3Component {
  elements: string[] = [];

  afegirElement() {
    this.elements.push(`Element ${this.elements.length + 1}`);
  }
}

Conclusió

En aquesta secció, hem après com definir plantilles de components en Angular, utilitzar interpolació i vinculació de dades, i treballar amb directives estructurals per crear vistes dinàmiques. Aquests conceptes són fonamentals per construir aplicacions Angular eficients i interactives. En el proper tema, explorarem com aplicar estils als components per millorar l'aparença de les nostres aplicacions.

◄ Anterior
◄
Següent ►
►

Curs d'Angular 2+

Mòdul 1: Introducció a Angular

Mòdul 2: Conceptes bàsics de TypeScript

Mòdul 3: Components i plantilles

Mòdul 4: Directives i pipes

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

Mòdul 6: Enrutament i navegació

Mòdul 7: Formularis en Angular

Mòdul 8: Client HTTP i observables

Mòdul 9: Gestió d'estat

Mòdul 10: Proves en Angular

Mòdul 11: Temes avançats

Mòdul 12: Desplegament i millors pràctiques

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