Angular bind only when mouse moves-CodePudding

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?

CodePudding user response：

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
>