I am trying to use a promise to ensure one function, "submit()" is called after the another function, "save()" has been completed. I haven't used promises in a long while and I'm confused on the syntax. I also tried using async and await but to no avail.

public globalFunction() {
//call save() first, wait until fully completed and then call submit()
    this.save().then(() => {
        this.submit(approver);
    })

    //this.save().then(res => this.submit(approver));
}

save() {
    return new Promise<void>((resolve, reject) => {

    this.service.save(this.item.id, updatedItemList).pipe(
      first(),
      catchError((err) => {
        this.toastService.show(`Save failed`, { type: "error" });
        return null;
      })
    ).subscribe((success: boolean) => {
        this.loadItemss().then(() => {
        this.uploadDocs();
      });
      this.toastService.show("Successfully saved", { type: "success" });
    });


    resolve();
  });
}

private submit(approver: Lookup): void {
    this.service.submit(this.item.id, approver).pipe(
      first(),
      catchError((error) => {
        this.toastService.show(`Submit failed`, { type: 'error' });
        return null;
      })
    ).subscribe((success: boolean) => {
      this.toastService.show(`Successfully submitted`, { type: 'success' })
    });
}