title: How to bind external api values to an angular interface and show it in a component (html)?
body: <p>I have been searching and searching, but no definitive answer. So I'll try it this way. It's actually very simple but I just don't know how to implement it (new to angular but know the basics).</p>
  <p>I want a component that shows the current price of an asset. I have this api call that returns JSON.
  Api call: <a href="https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&amp;vs_currencies=usd" rel="nofollow noreferrer">https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&amp;vs_currencies=usd</a>
  Returns: <a href="https://i.stack.imgur.com/eGSvl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eGSvl.png" alt="enter image description here" /></a></p>
  <p>But here's the thing. How do I bind this data to an interface in angular? I only need the usd price value to show in the component, but need to bind it to a class first so I can use it in the html component.</p>
  <p>What values does the class need to have? This didn't work:
  <a href="https://i.stack.imgur.com/wRw6G.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wRw6G.png" alt="enter image description here" /></a></p>
  <p>Maybe someone knows a nice api tutorial that shows how to do this? I haven't found any as of yet. Also the ones I found have definitive attributes defined in the response like: {
  &quot;Name&quot;: bitcoin
  &quot;usd&quot;: 10279.66
  }</p>
  <p>In short: Fetch data from that API (just the price). And use it in the template (angular component.html)</p>