title: How to use async function to await user input from onClick?
body: <p>I am trying to fetch  data from an external  api and I use <code>async</code> and <code>await</code>. I want to wait for user input  from an <code>onClick</code> function and  then to pass the url to an async function and to get the data in json format form that url.
  OnClick function is working:</p>
  <pre><code>onClick(){
     this.data=(&lt;HTMLInputElement&gt;document.getElementById('data')).value;
      
     return this.url='https://api.url.info/feed/'+this.data
  }
  </code></pre>
  <p>When I use <code>console.log(data2)</code> undefined an the next error: <strong>Failed to load resource: the server responded with a status of 404 (Not Found)</strong></p>
  <pre><code>async getData(){
      var data2=this.url;
      const response=await fetch(this.url);
      this.data=await response.json();
  }
  
  ngOnInit(){
      this.getData();
  }
  </code></pre>
  <p>HTML</p>
  <pre><code>&lt;input type=&quot;text&quot; id=&quot;data&quot;  value=&quot;&quot;/&gt;
  &lt;button type=&quot;button&quot; (click)=&quot;onClick()&quot; id=&quot;btn&quot;&gt;Search&lt;/button&gt;
  
  </code></pre>