title: Unable to get the text field value in typescript using angular
body: <p>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.</p>
  
  <p><strong>Request 1:</strong></p>
  
  <p><strong>End Point: (GET call)</strong></p>
  
  <pre><code>  http://localhost:8081/api/products?productId=7e1308ba2b9af
  </code></pre>
  
  <p>I just created a text field in the app.component.html file as like below:</p>
  
  <pre><code>    &lt;div&gt;
        &lt;input type="text" placeholder="Product ID" class="user_id_text"/&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;input type="submit" value="submit"/&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>Output:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/hEqpr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hEqpr.png" alt="enter image description here"></a></p>
  
  <p>I have written the below code and ensured it works as expected by using the hard-coded value.</p>
  
  <p><strong>app.component.ts:</strong></p>
  
  <pre><code> ngOnInit():void{
  
      this.http.get('http://localhost:8081/api/products?productId=7e1308ba2b9af').subscribe(data =&gt;{ 
  
        console.log(data);
      });
    }
  </code></pre>
  
  <p>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.</p>
  
  <p><strong>Request 2:</strong></p>
  
  <p>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.</p>
  
  <p><strong>End Point: (PUT call)</strong></p>
  
  <pre><code>    https://localhost:8081/api/updateRecord
  </code></pre>
  
  <p><strong>Request JSON:</strong></p>
  
  <pre><code>{
    "productId":234242882,
    "purchaseDate" : "2019-12-20",
    "status": "dispatched"
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>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. </p>