How to chain async functions in typescript?

Question

I have two asynchronous functions A and B.

How do I initialize function B only after function A is complete?

import { Component } from '@angular/core';

import { Options } from 'fullcalendar';
import { DataService } from './services/data.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  data: Data[] = [];

  calendarOptions: Options;

  constructor(private dataService: DataService){}

  ngOnInit() {
    const var1 = await this.A();
    const var2 = await this.B();
  }


  async A(){
      this.dataService.getItems().subscribe(items => {
        items.forEach(item => {
          this.data.push(item);
        })
      });

  }

  async B(){
      this.calendarOptions = {
        editable: true,
        eventLimit: false,
        header: {
          left: 'prev,next today',
          center: 'title',
          right: 'month,agendaWeek,agendaDay,listMonth'
        },
        defaultDate: '2017-11-23',
        navLinks: true,
        events: [{
            id:1,
            title:this.data[0].title,
            start:"2017-11-23 09:00:00",
            end:"2017-11-23 11:00:00",
            color:"#0071c5"
        }]
      };

  }
}

Answer 1

The way it’s yours async and awayt do nothing and think they are even wrong. Also there is no reason to save the return of functions since they do not return anything

You can pass a callback to run by the function A after completing its asynchronous operation:

ngOnInit() {
  this.A(this.B);
}
A(callback){
  this.dataService.getItems().subscribe(items => {
    this.data = this.data.concat(items);
    callback();
  });
}