how loads child component before the father

Question

I've got an angular app (TypeScript) setup where a parent component contains another child component within. City component (child) makes an Ajax request to load data (cities) which takes approx 2 secs.

@Component({
    providers: [UserService],
    template: `<city [city]='user.city' (citySelected)="user.city = $event"></city>`

})
export class FormComponent implements OnInit{ 

    private user:User = new User();

....

Problem, I require the city component to load first before the parent component.

where do you make the ajax request in the city component in ngOnInit() ? — Searching
my aplication: (renatodev.com.br | login: demo | password: demo123) when I edit a record there is a delay in state and city. — Renato Souza de Oliveira
Why do you think you need to load the parent later then the child? How is that even supposed to work? The child is part of the parent. — Günter Zöchbauer

Paul Paul · Accepted Answer · 2017-12-05T15:51:24

Your child component should load first considering how Angular 2 handles component interactions.

I see that you're trying to initialize your User object from the parent component. Considering how Angular 2 works, your child component would load first, and would not have access to user.city. The easiest solution for this is to add an *ngIf in your template to delay initialization of the child component in order to wait for the User object to be loaded.

Here is a snippet from the above question that includes the solution I mentioned.

@Component({
providers: [UserService],
template: `<city *ngIf="user" [city]='user.city' 
(citySelected)="user.city = $event"></city>`

})

export class FormComponent implements OnInit{ 

    private user:User = new User();

}

Let me know if anyone needs more clarification. Cheers!

how loads child component before the father

1 Answers