Vues

Liaison de données

Pour afficher des propriétés provenent da la classe du composant dans sa vue, on utilise la doubel accolade

<h1>{{ titre }}</h1> 

Pour lier une propriété d'un élément HTML à une propriété de la classe utiliser les crochets ou les doubles accolades

<img [src]='fruit.imgUrl' ... >
<input type='text' [disabled]='isDisabled'>

<img src={{fruit.imgUrl}} ... >

Pour lier des événements on utiliser les parenthèses

<button (click)='mettreAJour()'>Mettre à jour la facture</button>

Directives de contrôle

• @if(condition) { }, @else-if() {}, @else {} Le contenu des accolades est affiché si la condition est vraie
• @for( ) { } Permet de répéter un bloc HTML pour chaque élément d'une collection.

@if(fruits.length) {
<table>
...
    @for(fruit of fruits; track fruit.id)
    <tr>
    ...
    <!-- Utilisation de pipe -->
    <td>{{fruit.prix | currency:'CAD'}}</td>
    ...
    </tr>
...
}

Utilisation de track

Notez bien que la directive @for() utilise track pour qu'Angular conserve une relation entre les données et les éléments du DOM sur la page. Ceci optimize la performence lorsqu'il y a un changement dans l'ensemble des données.

La porpriété suivie par track devrait toujours être une propriété unique. Dans un cas comme un tableau de chaînes de caractères, on pourra suive $index à la place.

Pipes

• Permettent de modifier l'affichage des données
• Ex. lowercase, uppercase, currency

• Prise en charge des paramètres (séparés par :)

• ex. avec currency : {{fruit.prix | currency:'CAD':'symbol-narrow'}} où 'CAD' est le currencyCode et 'symbal-narrow' est la valeur pour le paramètre display (affiche $)

• On peut en créer des personnalisées
• On peut en utiliser plusieurs les unes après les autres

@Pipe({
    name: 'retirerCaractere'
})

export class RetirerCaractere implements PipeTransform {
    transform(valeur: string, caractere: string): string {
        return valeur.replace(caractere, '');
    }
}

Référence

Documentation Angular