Q:

Unable to get the text field value in typescript using angular

I have two type of Request that I need to fetch from the Angular UI page and pass it into app.component.ts file so that I can call my REST client through HTML page.
Request 1:
End Point: (GET call)
  http://localhost:8081/api/products?productId=7e1308ba2b9af

I just created a text field in the app.component.html file as like below:
    <div>
      <input type="text" placeholder="Product ID" class="user_id_text"/>
    </div>
    <div>
      <input type="submit" value="submit"/>
    </div>

Output:

I have written the below code and ensured it works as expected by using the hard-coded value.
app.component.ts:
 ngOnInit():void{

    this.http.get('http://localhost:8081/api/products?productId=7e1308ba2b9af').subscribe(data =>{ 

      console.log(data);
    });
  }

The above code return data array with proper response. But the above productId value is hard-coded (7e1308ba2b9af). And I just want to get that value from HTML text box when user click the submit button and pass it to query param and run the above request.
Request 2:
I have to get the below format json file from text box and pass it as JSON request body to the below end point URL.
End Point: (PUT call)
    https://localhost:8081/api/updateRecord

Request JSON:
{
  "productId":234242882,
  "purchaseDate" : "2019-12-20",
  "status": "dispatched"
}

I just want to create a text field and get the above json file if user click submit button and invoke the above end point.
I'm very new to the Angular and not sure how to implement this. I just googled but I didn't understand the way they resolved. It would be much appreciated if someone explain me the things and guide me to resolve this. 

A:

Use [(ngModel)] to bind an input to a variable:
<div>
  <input type="text" [(ngModel)]="productId" placeholder="Product ID"
         class="user_id_text"/>
</div>

Use (click) to bind a button to a function:
<div>
  <input type="submit" (click)="getById(productId)" value="submit"/>
</div>

In the controller:
ngOnInit():void {    
    this.http.get('http://localhost:8081/api/products?productId=7e1308ba2b9af').subscribe(data =>{     
      console.log(data);
    });
}

getById():void {
    const base:string = "http://localhost:8081/api/products";       
    const url:string = `${base}?productId=${this.productId}`;
    this.http.get(url).subscribe(data =>{ 
        console.log(data);
    });    
}

