Les directives són una de les característiques més potents d'Angular. Permeten modificar el comportament dels elements del DOM de manera declarativa. En aquest tema, explorarem 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:
- Directives d'atribut: Canvien l'aparença o el comportament d'un element, component o altra directiva.
- Directives estructurals: Canvien la disposició del DOM afegint o eliminant elements.
- 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ó:
isActiveiisDisabledsón variables booleanes del component.- La classe
actives'aplicarà siisActiveéstrue. - La classe
disableds'aplicarà siisDisabledéstrue.
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ó:
textColorifontSizesón variables del component.- El color del text serà el valor de
textColor. - La mida de la font serà el valor de
fontSizeen píxels.
Directives estructurals integrades
ngIf
La directiva ngIf permet afegir o eliminar elements del DOM basant-se en una condició.
Exemple:
Explicació:
isVisibleés una variable booleana del component.- El div només es mostrarà si
isVisibleéstrue.
ngFor
La directiva ngFor permet iterar sobre una col·lecció d'elements i crear una instància del DOM per a cada element.
Exemple:
Explicació:
itemsés una col·lecció (array) del component.- Per a cada element de
items, es crearà un elementliamb el contingut de l'element.
ngSwitch
La directiva ngSwitch permet mostrar o ocultar 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 variable del component.- Es mostrarà el div corresponent al valor de
viewMode('map','list'o per defecte).
Exercicis pràctics
Exercici 1: Utilitzar ngClass i ngStyle
Objectiu: Crear un component que canviï la classe i els estils d'un element basant-se en variables del component.
Instruccions:
- Crea un component nou anomenat
StyleToggleComponent. - Afegeix dues variables booleanes al component:
isActiveiisDisabled. - Afegeix un div al template del component que utilitzi
ngClassingStyleper canviar la classe i els estils basant-se en les variables. - Afegeix dos botons per canviar els valors de
isActiveiisDisabled.
Solució:
// style-toggle.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-style-toggle',
templateUrl: './style-toggle.component.html',
styleUrls: ['./style-toggle.component.css']
})
export class StyleToggleComponent {
isActive = false;
isDisabled = false;
toggleActive() {
this.isActive = !this.isActive;
}
toggleDisabled() {
this.isDisabled = !this.isDisabled;
}
}<!-- style-toggle.component.html -->
<div [ngClass]="{'active': isActive, 'disabled': isDisabled}" [ngStyle]="{'color': isActive ? 'green' : 'red'}">
Aquest div canvia de classe i estil.
</div>
<button (click)="toggleActive()">Toggle Active</button>
<button (click)="toggleDisabled()">Toggle Disabled</button>Exercici 2: Utilitzar ngIf i ngFor
Objectiu: Crear un component que mostri una llista d'elements i permeti afegir-ne de nous.
Instruccions:
- Crea un component nou anomenat
ItemListComponent. - Afegeix una variable
itemsque sigui un array de strings. - Afegeix un input i un botó per afegir nous elements a la llista.
- Utilitza
ngForper mostrar la llista d'elements. - Utilitza
ngIfper mostrar un missatge quan la llista estigui buida.
Solució:
// item-list.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-item-list',
templateUrl: './item-list.component.html',
styleUrls: ['./item-list.component.css']
})
export class ItemListComponent {
items: string[] = [];
newItem: string = '';
addItem() {
if (this.newItem) {
this.items.push(this.newItem);
this.newItem = '';
}
}
}<!-- item-list.component.html -->
<div>
<input [(ngModel)]="newItem" placeholder="Nou element">
<button (click)="addItem()">Afegeix</button>
</div>
<ul>
<li *ngFor="let item of items">{{ item }}</li>
</ul>
<div *ngIf="items.length === 0">
La llista està buida.
</div>Conclusió
Les directives integrades d'Angular són eines poderoses que permeten modificar el comportament i l'aparença dels elements del DOM de manera declarativa. En aquest tema, hem explorat algunes de les directives d'atribut i estructurals més utilitzades, com ngClass, ngStyle, ngIf, ngFor i ngSwitch. A més, hem practicat amb exercicis per reforçar els conceptes apresos. En el proper tema, explorarem com crear directives personalitzades per adaptar-les a les nostres necessitats específiques.
Curs d'Angular 2+
Mòdul 1: Introducció a Angular
- Què és Angular?
- Configuració de l'entorn de desenvolupament
- La teva primera aplicació Angular
- Arquitectura d'Angular
Mòdul 2: Conceptes bàsics de TypeScript
- Introducció a TypeScript
- Variables i tipus de dades en TypeScript
- Funcions i funcions fletxa
- Classes i interfícies
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
- Introducció al client HTTP
- Realització de sol·licituds HTTP
- Gestió de respostes HTTP
- Ús d'observables