Angular 仅在鼠标移动时绑定

Question

I have a very weird problem. I've got an input and I want to show a button only when the input has a value. It's working only if i move the mouse.

<input class="form-control"
   type="text"
   placeholder="hello there..."
   #helloInput
>

{{helloInput.value}} --> not shows until mouse is moving

<button class="btn btn-success"
   *ngIf="helloInput.value"
>Show me</button>

It's very weird. Any idea?

Answer 1

Angular updates view only by calling change detection. Most of the time it happens automatically because of Event listeners/XHR/setTimeout/setInterval calls.

In your example there's no any event listener known by Angular. Since it's updated by mousemove then there's some listener for it and Angular detected that.

In order to update your view on any input value change you can simply add empty input event listener:

<input class="form-control"
   type="text"
   placeholder="hello there..."
   #helloInput
   (input)="0"  <=============== this one
>