Angular2 Dynamic Component Loader with HTTP query

Question

I'm trying to load data via HTTP GET in one component and then I need to use this data in child component that loaded dynamically.

Here's the code:

ngOnInit(){
this.accountService.getPersonalInfo().subscribe(
        response => {
            this.Account = response.json();

            this.dcl.loadIntoLocation(HeaderComponent, this.elementRef, 'header')
                .then(compRef => {
                        compRef.instance.Account=this.Account;
                    }
                );
        }
        );
}

In child component (HeaderComponent) I can use this.Account to get this data. Is there a better way to do this?

Günter Zöchbauer · Accepted Answer · 2016-04-22 16:27:04Z

2

You can just provide in an ancestor component

@Component({
  selector: 'header-cmp',
  ...
})
class HeaderCmp {
  constructor(private account:AccountService) {
    this.account.someObservable.subscribe(...); // or whatever
  }
}

@Component({
  selector: 'parent-cmp',
  providers: [AccountService],
  ...
})
class ParentCmp {
  constructor(private account:AccountService) {
    // set some values
  }
}

The component where you provide the "service" can be the component where this.dcl.loadIntoLocation(...) is actually executed or some other ancestor component further up the chain.

answered Apr 22, 2016 at 16:27

Günter Zöchbauer

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

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

2 Comments

Yaroslav Osetrov Over a year ago

But then it will be two similar http queries - one in the parent component and other in the child, right? I need to use the data (this.Account) in both components

Günter Zöchbauer Over a year ago

Angulars DI maintains a single instance per provider. The ParentCmp will get the instance of the provider on itself. For the HeaderCmp DI will look upwards until it finds a provider for AccountService. If you don't add it anywhere in between (only applicable if ParentCmp and HeaderCmp are not in a direct parent-child relation) then DI will find the provider of ParentCmp and pass it to HeaderCmp as well. This way both components get a reference to the same AccountService instance.

Collectives™ on Stack Overflow

Angular2 Dynamic Component Loader with HTTP query

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related