Angular: Property binding to understand text element color lacks reactivity
P粉627427202
P粉627427202 2024-04-01 17:28:52
0
1
422

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?

P粉627427202
P粉627427202

reply all(1)
P粉186897465

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

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!