Accessing a property in a parent Component

Question

I have a property in a top level Component that is used data from a HTTP source like so (this is in a file called app.ts):

import {UserData} fro         


        

Answer 1

There are different way:

• global service

  • see also
  • https://github.com/escardin/angular2-community-faq/blob/master/services.md#how-do-i-communicate-between-components-using-a-shared-service
  • Global Events in Angular 2
  • Plunker

• service shared by parent and injected to the child

  • similar to global service but listed in providers or viewProviders in the parent instead of boostrap(...) and only available to children of parent.

• parent injected to the child and accessed directly by the child

  • disadvantage: tight coupling

export class Profile implements OnInit {
constructor(@Host() parent: App) {
  parent.userStatus ...
}

• data-binding

export class Profile implements OnInit {
  @Input() userStatus:UserStatus;
  ...
}