Questions about Angular2 template reference variables

<input -sharplocalInput>

{{localInput.value}}</>

in Angular, a template is used to refer to a problem with the use of variables, and the p tag displays the value of the input.
happens to be here today, but the value of the p element does not change when it is modified in input. The value of the p tag changes after a click event is written, and using asynchronous events such as setTimeout in the component has the same effect.

<input -sharplocalInput>

{{localInput.value}}</> <button (click)="showValue(localInput.value)">input</button>

Excuse me, what is the principle of this?

there are many problems with forgiving beginners.

Mar.20,2021

this has something to do with the update mechanism of Angular, which updates the binding only if it does an asynchronous event, so it's ready to work.

<input -sharplocalInput (keyup)="0">

{{localInput.value}}

Menu