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

HOME

Introducció

En aquest tema, aprendrem sobre dos conceptes fonamentals en Angular per a la comunicació entre la lògica de l'aplicació i la seva interfície d'usuari: la interpolació i l'enllaç de propietats. Aquests mecanismes ens permeten mostrar dades dinàmiques en les nostres plantilles i actualitzar la interfície d'usuari en resposta als canvis en les dades.

Interpolació

Què és la interpolació?

La interpolació és una tècnica que permet inserir valors de variables o expressions dins del codi HTML de les plantilles. Utilitza la sintaxi de doble claudàtor {{ }} per avaluar expressions i mostrar els resultats.

Exemple bàsic d'interpolació

<!-- app.component.html -->
<h1>Benvingut a {{ title }}!</h1>

// app.component.ts
export class AppComponent {
  title = 'la meva aplicació Angular';
}

En aquest exemple, la variable title definida en el component AppComponent es mostra dins de l'etiqueta <h1> utilitzant la interpolació.

Explicació detallada

Sintaxi: La sintaxi de la interpolació és {{ expressió }}.
Expressions: Les expressions dins dels claudàtors poden ser variables, operacions matemàtiques, crides a funcions, etc.
Actualització automàtica: Quan el valor de la variable canvia, la interfície d'usuari s'actualitza automàticament.

Exemple avançat d'interpolació

<!-- app.component.html -->
<p>El resultat de 2 + 2 és: {{ 2 + 2 }}</p>
<p>El nom complet és: {{ getFullName() }}</p>

// app.component.ts
export class AppComponent {
  firstName = 'John';
  lastName = 'Doe';

  getFullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

Enllaç de propietats

Què és l'enllaç de propietats?

L'enllaç de propietats permet establir valors de propietats HTML o atributs directament des de les dades del component. Utilitza la sintaxi de claudàtors [ ] per vincular una propietat HTML a una expressió del component.

Exemple bàsic d'enllaç de propietats

<!-- app.component.html -->
<img [src]="imageUrl" alt="Imatge dinàmica">

// app.component.ts
export class AppComponent {
  imageUrl = 'https://angular.io/assets/images/logos/angular/angular.png';
}

En aquest exemple, la propietat src de l'etiqueta <img> es vincula a la variable imageUrl del component AppComponent.

Explicació detallada

Sintaxi: La sintaxi de l'enllaç de propietats és [propietat]="expressió".
Propietats HTML: Es poden vincular qualsevol propietat HTML, com src, href, disabled, etc.
Actualització automàtica: Quan el valor de l'expressió canvia, la propietat HTML s'actualitza automàticament.

Exemple avançat d'enllaç de propietats

<!-- app.component.html -->
<button [disabled]="isButtonDisabled">Fes clic aquí</button>

// app.component.ts
export class AppComponent {
  isButtonDisabled = true;
}

En aquest exemple, la propietat disabled del botó es vincula a la variable isButtonDisabled del component AppComponent. Si isButtonDisabled és true, el botó estarà deshabilitat.

Exercicis pràctics

Exercici 1: Interpolació

Crea un nou component anomenat UserComponent.
Defineix una variable userName amb el valor 'Alice'.
Mostra el valor de userName en la plantilla del component utilitzant la interpolació.

Solució

// user.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent {
  userName = 'Alice';
}

<!-- user.component.html -->
<p>El nom de l'usuari és: {{ userName }}</p>

Exercici 2: Enllaç de propietats

Crea una variable isVisible en el component AppComponent amb el valor false.
Afegeix un paràgraf en la plantilla del component que només es mostri quan isVisible sigui true.

Solució

// app.component.ts
export class AppComponent {
  isVisible = false;
}

<!-- app.component.html -->
<p [hidden]="!isVisible">Aquest paràgraf és visible.</p>

Resum

En aquest tema, hem après sobre la interpolació i l'enllaç de propietats en Angular. La interpolació ens permet inserir valors de variables o expressions dins del codi HTML, mentre que l'enllaç de propietats ens permet establir valors de propietats HTML directament des de les dades del component. Aquests mecanismes són fonamentals per crear aplicacions Angular dinàmiques i interactives.

Interpolació i enllaç de propietats

Introducció

Interpolació

Què és la interpolació?

Exemple bàsic d'interpolació

Explicació detallada

Exemple avançat d'interpolació

Enllaç de propietats

Què és l'enllaç de propietats?

Exemple bàsic d'enllaç de propietats

Explicació detallada

Exemple avançat d'enllaç de propietats

Exercicis pràctics

Exercici 1: Interpolació

Solució

Exercici 2: Enllaç de propietats

Solució

Resum

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