Typescript Synchronize method calling

Issue

Hello Nativescript Team,

I am mashed up with the method calling.

Could please guide me How can I implement Sync Method calling in Nativescript + Angular

import { Component, OnInit, AfterContentInit } from "@angular/core";

@Component({
    selector: "Home",
    moduleId: module.id,
    templateUrl: "./home.component.html",
    styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit, AfterContentInit {

constructor() {
    this.firstMethod();
    this.secondMethod();
    this.thirdMethod();
    this.fourthMethod();
}

ngOnInit(): void {
    this.firstInitMethod();
    this.secondInitMethod();
    this.thirdInitMethod();
    this.fourtInitMethod();
}

private firstInitMethod() {
    console.log("1 ::::: firstInitMethod method");
}

private secondInitMethod() {
    console.log("2 ::::: secondInitMethod method");
}

private thirdInitMethod() {
    console.log("3 ::::: thirdInitMethod method");
}

private fourtInitMethod() {
    console.log("4 ::::: fourtInithMethod method");
}


private firstMethod() {
    console.log("1 ::::: First method");
}

private secondMethod() {
    console.log("2 ::::: second method");
}

private thirdMethod() {
    console.log("3 ::::: third method");
}

private fourthMethod() {
    console.log("4 ::::: fourth method");
}


ngAfterContentInit() {
    console.log("ngaftercontnet init method called");
    this.firstAfterInitMethod();
    this.secondAfterInitMethod();
    this.thirdAfterInitMethod();
    this.fourthAfterInitMethod();
}


private firstAfterInitMethod() {
    console.log("1 ::::: firstAfterInitMethod method");
}

private secondAfterInitMethod() {
    console.log("2 ::::: secondAfterInitMethod method");
}

private thirdAfterInitMethod() {
    console.log("3 ::::: thirdAfterInitMethod method");
}

private fourthAfterInitMethod() {
    console.log("4 ::::: fourthAfterInitMethod method");
}

output result:

[My Phone 5508]: 1 ::::: First method
[My Phone 5508]: 2 ::::: secondInitMethod method
[My Phone 5508]: 3 ::::: thirdInitMethod method
[My Phone 5508]: 3 ::::: third method
[My Phone 5508]: 2 ::::: second method
[My Phone 5508]: 4 ::::: fourtInithMethod method
[My Phone 5508]: 4 ::::: fourth method
[My Phone 5508]: ngaftercontnet init method called
[My Phone 5508]: 1 ::::: firstAfterInitMethod method
[My Phone 5508]: 2 ::::: secondAfterInitMethod method
[My Phone 5508]: 1 ::::: firstInitMethod method
[My Phone 5508]: 3 ::::: thirdAfterInitMethod method
[My Phone 5508]: 4 ::::: fourthAfterInitMethod method

I need Output method sync calling :

First methods in Contructor()

        this.firstMethod();
        this.secondMethod();
        this.thirdMethod();
        this.fourthMethod();
Second methods in Init

        this.firstInitMethod();
        this.secondInitMethod();
        this.thirdInitMethod();
        this.fourtInitMethod();
Third methods in AfterInit

        this.firstAfterInitMethod();
        this.secondAfterInitMethod();
        this.thirdAfterInitMethod();
        this.fourthAfterInitMethod();

Solution

You must return a Promise or Observable to wait until method finishes its process.

Such as:

private firstAfterInitMethod() {
  return new Promise((resolve, reject) => {
    console.log("1 ::::: firstAfterInitMethod method");
    // resolve("something"); when you want to return something.
  });
}

Other methods must return Promise in your case like firstAfterInitMethod().

You must call firstAfterInitMethod like this:

this.firstAfterInitMethod().then((resolve:any) => {
  // now you can call secondAfterInitMethod();
});

Note: TypeScript and JavaScript are asynchronous. Therefore, you must use Promise when you need to do some synchronized work.

Answered By - Yakupas