Angulaire : la liaison de propriété pour comprendre la couleur des éléments de texte manque de réactivité

Question

Ci-dessous mon fichier .ts,

import { Component } from '@angular/core';

@Component({
  selector: 'app-event-binding',
  templateUrl: './event-binding.component.html',
  styleUrls: ['./event-binding.component.css']
})
export class EventBindingComponent {

  textColor = '';
  onInput = (ev: any) => {
    this.textColor = ev.target.value;
  }
}

Ci-dessous mon modèle HTML,

<div>
    <h3 [style.color]="textColor">EVENT BINDING</h3>
    <input type="text" (input)="onInput($event)">
</div>

IciLorsque je tape complètement « bleu » dans la zone de saisie, la couleur de mon texte h3 passe au bleu. Mais j'ai remarqué que lorsque j'appuie sur retour arrière et que la valeur de textColor est désormais "blu", le texte reste toujours bleu. J'ai hâte de revenir au noir. Il ne devient noir que lorsque j'efface toute l'entrée. Alors, les couleurs en HTML conservent-elles une sorte d’histoire ? Qu'est-ce que cela fait ?

Answer 1

La même chose se produit lors de la manipulation du DOM en utilisant du JavaScript pur, j'ai préparé un exemple pour vous :

document.querySelector('input').addEventListener('input', event => {
  document.querySelector('h3').style.color = event.target.value;
})

EVENT BINDING