Angular 2 get data before loading child components

Question

I want to get the user data in the main root component of the app and then after user data is stored into service to continue loading other components. How can I achieve this? Currently, I have something like this:

@Injectable()
export class UserService {

user: Subject<User> = new BehaviorSubject(new User());

constructor(private _httpService: HTTPService){}

getUser(){
    return this.user;
}

getUserFromAPI(){
    this._httpService.get('user')
        .map(data => data.json())
        .subscribe(data => {
            this.user.next(data);
        });
}

But with this way, it means that I need to get the user on every other place through the Observable which I don't want. I want to have a static access. Currently, I'm getting the user:

this._userService.getUser().subscribe(data => {
        this.user = data;
    });

I mean I can get the user data in the component like this.user = _userService.getUser(); — Igor Janković
– Igor Janković, Commented Dec 29, 2016 at 9:13
That's not reliable if you get the data using an async call. — Günter Zöchbauer
– Günter Zöchbauer, Commented Dec 29, 2016 at 9:14
Yes, but please read the question. I want to get user on load an pause loading of child components until user is stored into service. — Igor Janković
– Igor Janković, Commented Dec 29, 2016 at 9:15

Community · Accepted Answer · 2017-05-23 11:46:48Z

3

You can use APP_INITIALIZER Angularjs2 - preload server configuration before the application starts for Angular to wait rendering any components before the data is available

or you can just use *ngIf to prevent components being rendered before the data is available

<ng-container *ngIf="data">
  <child1></child1>
  <child2></child2>
</ng-container>

edited May 23, 2017 at 11:46

CommunityBot

11 silver badge

answered Dec 29, 2016 at 9:00

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Igor Janković Over a year ago

With the *ngIf I'm getting the error Cannot find primary outlet to load SomeComponent. Do you know how I can fix this?

Günter Zöchbauer Over a year ago

If the component is added by the router use a resolver angular.io/docs/ts/latest/guide/router.html#!#resolve-guard

Igor Janković Over a year ago

Correct me if I'm wrong, but as far as I know, root component isn't load through the router?

Günter Zöchbauer Over a year ago

Right, the root component isn't added by the router, but the question was about child components not being added before data is available. If your child components are added by the router, then you should use resolve to delay components being added until the data is available.

Igor Janković Over a year ago

But that is not handling on the one place. It's not a solution for what I've asked. That means that I need to go through every new route and add resolve.

|

Collectives™ on Stack Overflow

Angular 2 get data before loading child components

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related