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

Directives integrades

Següent ►
►

Les directives són una de les característiques més potents d'Angular. Permeten modificar el comportament del DOM de manera declarativa. En aquest tema, ens centrarem en les directives integrades que Angular proporciona per defecte.

Què són les directives?

Les directives són classes que poden modificar el comportament dels elements del DOM. Hi ha tres tipus principals de directives en Angular:

  1. Directives d'atribut: Canvien l'aparença o el comportament d'un element, component o altra directiva.
  2. Directives estructurals: Canvien la disposició del DOM afegint o eliminant elements.
  3. Components: Són directives amb una plantilla associada.

Directives d'atribut integrades

ngClass

La directiva ngClass permet afegir o eliminar classes CSS d'un element de manera dinàmica.

Exemple:

<div [ngClass]="{'active': isActive, 'disabled': isDisabled}">
  Aquest div tindrà la classe 'active' si isActive és true i 'disabled' si isDisabled és true.
</div>

Explicació:

  • isActive i isDisabled són propietats del component que determinen si les classes active i disabled s'apliquen respectivament.

ngStyle

La directiva ngStyle permet aplicar estils CSS a un element de manera dinàmica.

Exemple:

<div [ngStyle]="{'color': textColor, 'font-size': fontSize + 'px'}">
  Aquest text tindrà el color i la mida de font especificats.
</div>

Explicació:

  • textColor i fontSize són propietats del component que determinen el color del text i la mida de la font respectivament.

Directives estructurals integrades

ngIf

La directiva ngIf permet afegir o eliminar elements del DOM basant-se en una condició booleana.

Exemple:

<div *ngIf="isVisible">
  Aquest div només es mostrarà si isVisible és true.
</div>

Explicació:

  • isVisible és una propietat del component que determina si l'element es mostra o no.

ngFor

La directiva ngFor permet iterar sobre una col·lecció d'elements i crear una instància del DOM per a cada element.

Exemple:

<ul>
  <li *ngFor="let item of items">
    {{ item }}
  </li>
</ul>

Explicació:

  • items és una col·lecció (array) del component. Cada element de items es mostrarà com un element de la llista (<li>).

ngSwitch

La directiva ngSwitch permet mostrar un dels diversos elements basant-se en una condició.

Exemple:

<div [ngSwitch]="viewMode">
  <div *ngSwitchCase="'map'">Vista de mapa</div>
  <div *ngSwitchCase="'list'">Vista de llista</div>
  <div *ngSwitchDefault>Vista per defecte</div>
</div>

Explicació:

  • viewMode és una propietat del component que determina quin cas es mostrarà. Si viewMode és 'map', es mostrarà el primer div; si és 'list', es mostrarà el segon div; en cas contrari, es mostrarà el div per defecte.

Exercicis pràctics

Exercici 1: Utilitzar ngClass i ngStyle

Descripció: Crea un component que canviï el color i la mida del text d'un paràgraf basant-se en les propietats del component.

Codi:

<!-- app.component.html -->
<p [ngClass]="{'highlight': isHighlighted}" [ngStyle]="{'font-size': fontSize + 'px'}">
  Aquest és un paràgraf dinàmic.
</p>
<button (click)="toggleHighlight()">Canvia el ressaltat</button>
<button (click)="increaseFontSize()">Augmenta la mida de la font</button>
// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  isHighlighted = false;
  fontSize = 14;

  toggleHighlight() {
    this.isHighlighted = !this.isHighlighted;
  }

  increaseFontSize() {
    this.fontSize += 2;
  }
}

Exercici 2: Utilitzar ngIf i ngFor

Descripció: Crea un component que mostri una llista d'elements i permeti afegir o eliminar elements de la llista.

Codi:

<!-- app.component.html -->
<div>
  <input [(ngModel)]="newItem" placeholder="Nou element">
  <button (click)="addItem()">Afegeix</button>
</div>
<ul>
  <li *ngFor="let item of items">
    {{ item }}
    <button (click)="removeItem(item)">Elimina</button>
  </li>
</ul>
<div *ngIf="items.length === 0">
  No hi ha elements a la llista.
</div>
// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  items: string[] = [];
  newItem: string = '';

  addItem() {
    if (this.newItem) {
      this.items.push(this.newItem);
      this.newItem = '';
    }
  }

  removeItem(item: string) {
    this.items = this.items.filter(i => i !== item);
  }
}

Resum

En aquesta secció, hem après sobre les directives integrades d'Angular, incloent ngClass, ngStyle, ngIf, ngFor i ngSwitch. Aquestes directives ens permeten modificar el comportament i l'aparença dels elements del DOM de manera declarativa i dinàmica. Hem vist exemples pràctics de com utilitzar aquestes directives i hem realitzat exercicis per reforçar els conceptes apresos. En el proper mòdul, explorarem els serveis i la injecció de dependències a Angular.

◄ 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