Sync Method calling Angular + Typescript

ios

#1

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


}

Response:


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

Thanks,
Parth


#2

@pap5508
Is that really the code from your project? or did you replace it with console logs just for this post?
Because if it is just console logs, it should all fire synchronously.

are you calling any async methods in your code?


#3

@multishiv19 : you can copy and paste the same code in Nativescript Playground… Everytime you will get different console log…


#4

this is the nature of javascript which is single-threaded and asynchronous programming language. so you need to work with callback functions, or promises, or async/await (in case u use es7) if you want to control the order of firing


#5

it is because of a race between ngOnInit, ngAfterContentInit and your constructor.
all of those fire asynchronously.


#6

@ganas
javascript is always synchronous
what we see as asynchronous is just an illusion.


#7

@multishiv19 but its asynchronous is really good at giving the illusion, and for people coming from strongly synchronous they might get confused at first
hypno-gif-5


#8

@ganas .
that’s true