ngOnInit() runs methos parallel?

Question

In my Angular project I call the method ConnectToHueBridge() and listAllGoups() from ngOnInit(). It seems to me that both methods will be parallel executed. But I need to run first ConnectToHueBridge() and then listAllGoups(). How can I do that?

var MyHue = new huepi();

@Component({

selector: 'my-app',
template: `
<h1>Hello {{name}}</h1>
<div>
  <ul>
    <li *ngFor="let group of lightgroups">
      {{group}}
    </li>
  </ul>
</div>
<Button (click)="listAllGroups()"> Get Groups</Button>`,
 })

export class AppComponent  {
  name = 'Angular';
  lightgroups: string[] = [];

constructor(){
}

ngOnInit(){
  this.ConnectToHueBridge(MyHue);
  this.listAllGroups();
}

listAllGroups(){
  for(var g in MyHue.Groups){
    this.lightgroups.push(g);
  }
  console.log("done loading groups");
}

 ConnectToHueBridge(MyHue:any){
 //do some stuff
 }
}
}

If I click on the button to execute the method everything works fine. How can I execute the methods after each other?

score 1 · Answer 1 · answered May 24 '17 at 13:30

1

You have to make them observable.

ConnectToHueBridge(MyHue:any): Observable<any> {
    //do some stuff
    return Observable.of(true);
}

Then, in your ngOnInit do this

ngOnInit() {
    this.ConnectToHueBridge('xxx').subscribe(data => {
        // data = true, you can change it in your function
        this.listAllGroups();
    });
}

answered May 24 '17 at 13:30

this did not work for me, still the same problem. I have some console.log() in the `ConnectToHueBridge()` method and a console.log() in `listAllGroups()` method but the output in the browser console is mixed. There should be first all logs from `connectToHueBridge()` and then all from `listAllGroups()` so I know the data is ready to show it in the HTML. If I hit the button to execute the `listAllGroups()` again the data will be shown in HTML. – WeSt May 24 '17 at 19:40
Do you have any other ideas? – WeSt May 27 '17 at 23:27
I figured out, that the `MyHue` object is not ready when the `listAllGroups()` is executed, so it skips the for loop and only displays the console.log() After the HTML is displayed and I hit the button to execute `listAllGroups()` again, the for loop runs and the content will be shown in the HTML Do you have any other ideas to solve this? – WeSt May 27 '17 at 23:36
Sorry for the answer delay, mother's day in my country. Well it seems obvious : if your problem is the MyHue object, shouldn't you check if you have a valid object ? – May 28 '17 at 19:12
Thank you for further help. Well I edited this part: `listAllGroups(){ console.log(MyHue.Groups); for(var g in MyHue.Groups){ //MyHue.Groups returns a array console.log(g); this.lightgroups.push(g); } console.log("done loading groups"); }` the first time console.log(MyHue.Groups) returns a empty array. If I execute it again manually it provides the elements I need. The MyHue Object is declared with a instance of a other JS lib like this: `var MyHue:any = new huepi();` – WeSt May 28 '17 at 21:30

ngOnInit() runs methos parallel?

1 Answers1