Angular 2 component execution order

Question

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder }  from '@angular/forms';
import {Router, ActivatedRoute, Params} from '@angular/router';

import { Country } from './../../model/country';
import { CountryService } from './../../service/country.service';

@Component({
  selector: 'app-country-add',
  templateUrl: './country-add.component.html', 
  providers: [CountryService]
})
export class CountryAddComponent implements OnInit {
  
   private country: Country;
   private countryId: number;
   private countryForm: FormGroup; 
    
  constructor(private _countryService: CountryService,private formBuilder: FormBuilder, private activatedRoute: ActivatedRoute ) {
    this.activatedRoute.queryParams.subscribe((params: Params) => {
        this.countryId = params['id'];        
      });
       if(this.countryId!=null){
      this.getCountry(this.countryId); 
       console.log('konstruktor');
     }       
  }

  ngOnInit() {   
    console.log('on init');
    this.createForm();      
    this.setForm();      

  }

  private createForm(): void {
    this.countryForm = this.formBuilder.group({     
          name: ['', Validators.required],     
        });
  }

  private setForm(){   
    this.countryForm.setValue({
      name: this.country.name     
    })
     
  }

   createCountry({value, valid}){
    this.country = Country.fromJSON(value);    
    this._countryService.createCountry(this.country).subscribe(null,error => alert(error));
  } 

   getCountry(id: number){
     this.country = new Country();    
    this._countryService.getCountry(id).subscribe(data=>{     
      this.country.name = data.name;
      this.country.id = data.id;
       console.log('getCountry method')
    }  
    , error => alert(error));
    
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

I have problem with method execution order in angular2 component. Why in above code method execution order is constructor -> onInit -> getCountry should be constructor -> in constructor is called getCountry -> ngInit. When i load this component template the console log order is : enter image description here

Someone can explain me this?

Because `getCountry` is an asynchronous operation. – eko Jul 14 '17 at 12:47 — eko, Jul 14 '17 at 12:47

score 2 · Accepted Answer · answered Jul 14 '17 at 12:59

I'm pretty sure the order is (constructor => getCountry => ngOnInit). What is happening in the console is that your console.log('getCountry method') is in the response of your service, which happens asynchronously.

I see that you use the country's name in your setForm(), I would suggest calling createForm() inside your constructor and setForm() inside the callback from the getCountry() service.

constructor(private _countryService: CountryService, private formBuilder: FormBuilder, private activatedRoute: ActivatedRoute) {
    this.activatedRoute.queryParams.subscribe((params: Params) => {
        this.countryId = params['id'];
    });
    this.createForm();
    if (this.countryId != null) {
        this.getCountry(this.countryId);
        console.log('konstruktor');
    }
}

ngOnInit() {   
    console.log('on init');
}

getCountry(id: number){
    this.country = new Country();
    this._countryService.getCountry(id).subscribe(data => {
        this.country.name = data.name;
        this.country.id = data.id;
        console.log('getCountry method')
        this.setForm();
    }
    , error => alert(error));

}

Also, you might want to try using async/await if your services are returning a Promise.

async getCountry(id: number){
    this.country = new Country();
    try {
        let data = await this._countryService.getCountry(id);
        this.country.name = data.name;
        this.country.id = data.id;
        console.log('getCountry method')
        this.setForm();
    } catch (error) {
        alert(error)
    }
}

Angular 2 component execution order

1 Answers1