Typescript Synchronize method calling

Question

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");
}

}

[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();

I'm not sure what your question is, could you rephrase it ? Otherwise, I advise you to take a look at the Angular lifecycle to understand how it works — user4676340
Well you are calling these methods in OnInit and constructor, so this is expected. If you want all to run in sequence then add all in OnInit. Then these will run in sequence, if these are not actually async. — AJT82

Yakupas Yakupas · Accepted Answer · 2017-12-30T13:57:48

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 synchronization work.

Typescript Synchronize method calling

1 Answers