title: Angular 4 asynchronous initialization of a service based on a window event
body: <p>I'm trying to properly integrate Web3 with Angular 4 by creating a web3 service that needs to wait for the window to be loaded before it can check whether window.web3 was injected. And we should be able to query this service only after this was done. Here is the relevant code from Metamask's documentation <a href="https://github.com/MetaMask/faq/blob/master/DEVELOPERS.md#partly_sunny-web3---ethereum-browser-environment-check" rel="nofollow noreferrer">excerpt</a>:</p>
  
  <pre><code>window.addEventListener('load', function() {
  
    // Checking if Web3 has been injected by the browser (Mist/MetaMask)
    if (typeof web3 !== 'undefined') {
      // Use Mist/MetaMask's provider
      window.web3 = new Web3(web3.currentProvider);
    } else {
      console.log('No web3? You should consider trying MetaMask!')
      // fallback - use your fallback strategy (local node / hosted node + in-dapp id mgmt / fail)
      window.web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));
    }
  
    // Now you can start your app &amp; access web3 freely:
    startApp()
  
  })
  </code></pre>
  
  <p>I found <a href="https://stackoverflow.com/questions/36387308/async-initialization-of-angular-2-service">this other answer</a> that seems to do what I want, but converting a Promise into an Observable.</p>
  
  <p>How can I initialize an Angular4 service that wraps around this web3 object in such a way that any request to members of web3 will wait for it to be initialized?</p>
  
  <p>Right now the code I'm using uses intervals but I don't like it as it feels very messy.</p>