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