Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Accessing a property in a parent Component

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} from './services/user-data/UserData';  Component({     selector: 'app', // <app></app>     providers: [...FORM_PROVIDERS],     directives: [...ROUTER_DIRECTIVES],     pipes: [],     template: require('./app.html') }) @RouteConfig([     // stuff here ])  export class App {     // Please note that UserData is an Injectable Service I have written     userStatus: UserStatus;      constructor(private userData: UserData) {         this.userStatus = new UserStatus();     }      ngOnInit() {         this.userData.getUserStatus()             .subscribe(             (status) => {                 this.userStatus = status; // I want to access this in my Child Components...             },             (err) => {console.log(err);},             () => {console.log("User status complete");            }         );     } } 

Now, I have another Component that is a direct child of the top level Component and within it I would like to access the parent's property 'userStatus', here is the child:

Component({     selector: 'profile',     template: require('app/components/profile/profile.html'),     providers: [],     directives: [],     pipes: [] })  export class Profile implements OnInit {     constructor() {      }      ngOnInit() {         // I want to have access with the parent App Component, 'userStatus' propety here... I only want to read this property     } } 

Now in Angular 1.x this would be easy as I could reference $parent in my child controller or (ANTI PATTERN ALERT!!!) I could be so foolish to put this data in my $rootScope.

What would be the best way to access the parent in Angular 2?

like image 381
Mike Sav Avatar asked Feb 08 '16 10:02

Mike Sav


People also ask

How do you communicate between parent and child components?

@Input() and @Output() give a child component a way to communicate with its parent component. @Input() lets a parent component update data in the child component. Conversely, @Output() lets the child send data to a parent component.

How do you pass variable from parent component to child component?

Pass data from parent to child component using @Input() decorator, which allows data to pass through templates and child to parent component using @Output() decorator with the help of Event Emitter. Create a new Angular project using the following NPM command: ng new componentSharing.

What is @input and @output in Angular?

@Input() and @Output() allow Angular to share data between the parent context and child directives or components. An @Input() property is writable while an @Output() property is observable.

Which is a parent component in Angular?

concept parent component in category angularA parent component can pass data to its child by binding the values to the child's component property. A child component has no knowledge of where the data came from. A child component can pass data to its parent (without knowing who the parent is) by emitting events.


1 Answers

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;   ... }  <profile [userStatus]="userStatus"> 
like image 195
Günter Zöchbauer Avatar answered Oct 03 '22 05:10

Günter Zöchbauer