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

Plantilles de components

Següent ►
►

En aquest tema, explorarem les plantilles de components a Angular. Les plantilles són una part fonamental dels components, ja que defineixen la vista que es renderitza a l'usuari. Aprendrem com crear i utilitzar plantilles, així com algunes tècniques avançades per millorar la seva funcionalitat.

Continguts

  1. Què és una plantilla de component?
  2. Sintaxi bàsica de les plantilles
  3. Interpolació
  4. Enllaç de propietats
  5. Enllaç d'esdeveniments
  6. Directives estructurals
  7. Exercicis pràctics
  8. Conclusió

Què és una plantilla de component?

Una plantilla de component és un bloc de codi HTML que defineix la vista associada a un component. Aquesta vista pot incloure elements HTML, enllaços de dades, directives i altres components Angular.

Sintaxi bàsica de les plantilles

Les plantilles es defineixen dins del decorador @Component utilitzant la propietat template o templateUrl.

Exemple amb template

@Component({
  selector: 'app-example',
  template: `
    <h1>Hola, {{ nom }}!</h1>
    <p>Aquesta és una plantilla de component.</p>
  `
})
export class ExampleComponent {
  nom: string = 'Món';
}

Exemple amb templateUrl

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

I el fitxer example.component.html:

<h1>Hola, {{ nom }}!</h1>
<p>Aquesta és una plantilla de component.</p>

Interpolació

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

Exemple d'interpolació

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

En aquest exemple, el valor de la propietat nom del component es mostrarà dins de l'element <h1>.

Enllaç de propietats

L'enllaç de propietats permet establir valors d'atributs HTML basats en les propietats del component.

Exemple d'enllaç de propietats

<img [src]="imatgeUrl" alt="Imatge d'exemple">

En aquest exemple, l'atribut src de l'element <img> es vincula a la propietat imatgeUrl del component.

Enllaç d'esdeveniments

L'enllaç d'esdeveniments permet associar esdeveniments HTML a mètodes del component.

Exemple d'enllaç d'esdeveniments

<button (click)="saludar()">Fes clic aquí</button>

I el mètode saludar al component:

export class ExampleComponent {
  saludar() {
    alert('Hola!');
  }
}

Directives estructurals

Les directives estructurals canvien la disposició del DOM afegint o eliminant elements. Les directives més comunes són *ngIf i *ngFor.

Exemple de *ngIf

<p *ngIf="mostrarMissatge">Aquest missatge es mostra condicionalment.</p>

Exemple de *ngFor

<ul>
  <li *ngFor="let element of elements">{{ element }}</li>
</ul>

Exercicis pràctics

Exercici 1: Crear una plantilla amb interpolació

  1. Crea un nou component anomenat SalutacioComponent.
  2. Defineix una propietat nom al component.
  3. Utilitza la interpolació per mostrar un missatge de benvinguda a la plantilla.

Solució

// salutacio.component.ts
@Component({
  selector: 'app-salutacio',
  template: `
    <h1>Hola, {{ nom }}!</h1>
  `
})
export class SalutacioComponent {
  nom: string = 'Estudiant';
}

Exercici 2: Utilitzar enllaç de propietats i esdeveniments

  1. Afegeix una imatge a la plantilla utilitzant l'enllaç de propietats.
  2. Afegeix un botó que canviï la imatge quan es faci clic.

Solució

// imatge.component.ts
@Component({
  selector: 'app-imatge',
  template: `
    <img [src]="imatgeUrl" alt="Imatge d'exemple">
    <button (click)="canviarImatge()">Canvia la imatge</button>
  `
})
export class ImatgeComponent {
  imatgeUrl: string = 'https://via.placeholder.com/150';

  canviarImatge() {
    this.imatgeUrl = 'https://via.placeholder.com/200';
  }
}

Conclusió

En aquesta secció, hem après què són les plantilles de components i com utilitzar-les per crear vistes dinàmiques a Angular. Hem explorat la sintaxi bàsica, la interpolació, l'enllaç de propietats i esdeveniments, així com les directives estructurals. A més, hem practicat aquests conceptes amb exercicis pràctics. En el proper tema, aprofundirem en els estils de components.

◄ 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