title: async/await in Angular `ngOnInit`
body: <p>I’m currently evaluating the pros ‘n’ cons of replacing Angular’s resp. RxJS’ <code>Observable</code> with plain <code>Promise</code> so that I can use <code>async</code> and <code>await</code> and get a more intuitive code style.</p>
  
  <p>One of our typical scenarios: Load some data within <code>ngOnInit</code>. Using <code>Observables</code>, we do:</p>
  
  <pre><code>ngOnInit () {
    this.service.getData().subscribe(data =&gt; {
      this.data = this.modifyMyData(data);
    });
  }
  </code></pre>
  
  <p>When I return a <code>Promise</code> from <code>getData()</code> instead, and use <code>async</code> and <code>await</code>, it becomes:</p>
  
  <pre><code>async ngOnInit () {
    const data = await this.service.getData();
    this.data = this.modifyMyData(data);
  }
  </code></pre>
  
  <p>Now, obviously, Angular will not “know”, that <code>ngOnInit</code> has become <code>async</code>. I feel that this is not a problem: My app still works as before. But when I look at the <code>OnInit</code> interface, the function is obviously not declared in such a way which would suggest that it can be declared <code>async</code>:</p>
  
  <pre><code>ngOnInit(): void;
  </code></pre>
  
  <p>So -- bottom line: Is it reasonable what I’m doing here? Or will I run into any unforseen problems?</p>