[Fixed] how to use data binding for getting a value from user input and multiplay with contents with {{ …}}

Issue

i have a api response i.e price of product, {{price}}

i have a no .of products adding and reducing like

<div class="number-input"> <h2>Price: {{price }}</h2>
        <button onclick="this.parentNode.querySelector('input[type=number]').stepDown()" >-</button>
        <input #qty class="quantity" min="0" max="25" name="quantity" type="number" id="quan" ngModel>
         <button onclick="this.parentNode.querySelector('input[type=number]').stepUp()" class="plus">+</button>
      </div>

i need somthing like {{price * input.value}} how to achieve this in angular(11)

Solution

Here is the solution please follow the below link.
https://stackblitz.com/edit/angular-ivy-w6dvcq?file=src%2Fapp%2Fapp.component.ts