Angular: Property binding to understand text element color lacks reactivity

Question

The following is my .ts file,

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;
  }
}

The following is my HTML template,

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

HereWhen I type "blue" completely into the input box, my h3 text color changes to blue. But I noticed that when I press backspace and now the value of textColor is "blu", the text still stays blue. I'm looking forward to getting back to black. It only turns black when I clear the entire input. So do colors in HTML retain some kind of history? What does this do?

Answer 1

The same thing happens when using pure JavaScript to manipulate the DOM, I have prepared an example for you:

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

EVENT BINDING