#6: 📥 Property binding
Nous avons maintenant notre composant input-button-unit, mais il ne fait pas grand-chose. Nous voulons lui donner vie.
Ajoutons un élément HTML input et faisons en sorte que son texte de contrôle reflète la valeur de la propriété title.
Nous allons revenir à l'état du composant avant nos expériences avec ses méthodes:
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-input-button-unit',
standalone: true,
imports: [CommonModule],
templateUrl: './input-button-unit.component.html',
styleUrls: ['./input-button-unit.component.scss']
})
export class InputButtonUnitComponent {
title = 'Hello World';
constructor() { }
}Ajoutons un élément HTML input et un bouton au modèle:
<p>
input-button-unit works!
The title is: {{ title }}
</p>
<input>
<button>Save</button>Rappel: Nous utilisons l'interpolation pour présenter la valeur de la propriété title: {{ title }}. Angular présente ensuite la valeur de title chaque fois que notre composant app-input-button-unit est affiché.
Comment pouvons-nous afficher la valeur de la propriété title dans l'élément HTML input lui-même?
Chaque élément input a un attribut appelé value, qui contient la string qui est affichée à l'intérieur de la zone input. En HTML, nous pouvons passer une string directement à l'attribut value de l'élément:
Mais nous perdons la liaison dynamique entre les propriétés dans le contrôleur et le modèle.
Comme nous l'avons vu, Angular nous permet de lier les propriétés au modèle facilement avec l'interpolation. Maintenant, nous allons voir comment lier une propriété d'élément à une propriété de classe. Nous entourons la propriété d'élément voulue avec des crochets et lui passons le membre de la classe :
Essayons et voyons le résultat dans le navigateur !
a# Faire du binding avec des méthodes
Les expressions auxquelles nous pouvons nous lier dans le modèle ne se limitent pas aux propriétés de classe. Elles peuvent être un appel de méthode ou presque toute autre expression JavaScript valide.
Playground: Par exemple, lier la valeur d'entrée à un appel de méthode qui renvoie une valeur. Tout d'abord, ajoutons la méthode generateTitle n'importe où à l'intérieur de la classe, mais pas à l'intérieur de l'une de ses méthodes.
Dans le modèle, remplacez les appels du titre par l'appel de la méthode (n'oubliez pas les parenthèses !) :
b# Changement de Detection
Angular possède un mécanisme de détection des changements très efficace. Il recherche les liaisons dans les modèles des composants, puis met à jour la valeur chaque fois que l'expression liée est modifiée.
Playground: Pour le voir, changeons la valeur du titre après quelques secondes et voyons ce qui se passe. Appelez la fonction setTimeout à l'intérieur du constructeur:
setTimeout est une fonction JavaScript. Son premier paramètre est ce que nous voulons qu'il se passe - une fonction de notre choix. Le deuxième paramètre est le délai que nous voulons, en millisecondes. Dans cet exemple, nous passons une fonction fléchée qui définit la valeur de this.title au bout de 3 secondes.
c# Resources
Angular Guide - Template Property Binding
d# Note sur l'accès au DOM
En utilisant le JavaScript classique, nous pouvons insérer la valeur dans l'entrée via ses propriétés. Nous allons récupérer l'élément du DOM et assigner la valeur du membre title à la propriété value de l'élément.
En JavaScript, nous trouvons l'élément input dans le DOM par son id, puis nous définissons sa propriété value sur la valeur de la propriété title. Nous devons ensuite ajouter l'id à l'élément input :
Cela fonctionnera dans le navigateur.
Cependant, c'est fortement déconseillé dans Angular. Vous ne devriez jamais accéder au DOM directement ! C'est parce que vous pouvez attribuer différents rendus à Angular et exécuter l'application sur différentes plates-formes. Ils peuvent être des rendus pour mobile, bureau, ou même un robot. Ces plateformes n'auront pas d'objet document à partir duquel vous pouvez manipuler le résultat !
Last updated