How can i access the values from parent component in angular2 using dependency injection?

Question

I have two components one parent and a child i want to access a variable in parent component from child using DI but i am not getting that.i have made a plunker demo http://plnkr.co/edit/fcfweLJAmadKVWKXF25l?p=preview ... I tried to access the value of variable from child and got corrrectly but not from parent to child.This is how i am accessing variable in child component

@Component({
  selector: 'child',
  providers:[AppComponent]
  template: '<h1>My second Angular 2 App</h1>'
})
class NameComponent {
  name:string;
  constructor(AppComponent: AppComponent) {
    this.name = AppComponent.getName();
    console.log(this.name);
  }
}

I want to know is it possible to access variable from parent using DI? some body please tell me how to get the values

Thierry Templier · Accepted Answer · 2017-04-24T07:19:37.337

14

Yes, it's possible but you need to leverage forwardRef as described below because you can't use hoisting:

@Inject(forwardRef(() => AppComponent)) app:AppComponent

Here is the complete sample:

@Component({
  selector: 'child',
  providers:[AppComponent]
  template: '<h1>My second Angular 2 App</h1>'
})
class NameComponent {
  name:string;
  constructor(@Inject(forwardRef(() => AppComponent)) appComponent: AppComponent) {
    this.name = appComponent.getName();
    console.log(this.name);
  }
}

@Component({
})
class AppComponent {
}

Here is the updated plunkr: http://plnkr.co/edit/brmQ01wFWrWvXmxpJpCc?p=preview.

This article written by Christoph Burgdorf could also help you:

http://blog.thoughtram.io/angular/2015/09/03/forward-references-in-angular-2.html

We should also be careful of cyclic dependency if classes are defined into separate modules / files: the parent component imports the child one and the child one imports the parent one...

edited Apr 24 '17 at 07:19

answered Feb 02 '16 at 12:49

Thierry Templier

198,364
44
396
360

Thank you @Thierry Templier... I have one more question...U taught me how to get the values from parent to child. In the same way if i get an object from parent component and make some changes to object in child component.Is it possible to reflect the changes done? – abhilash reddy Feb 02 '16 at 13:19
Yes, you can leverage the two-way binding support for custom components. See this answer: http://stackoverflow.com/questions/35154793/angular-2-how-can-a-child-component-speak-to-a-parent-component/35154812#35154812. – Thierry Templier Feb 02 '16 at 13:32
1

@abhilashreddy, if you just want to share data between the parent and child, simply use a (reference type) child input property: see http://stackoverflow.com/a/34208500/215945. In general, you should avoid injecting parents into children, as it results in coupling. – Mark Rajcok Feb 02 '16 at 23:38
@Thierry Templier when i separate the parent and child component i am not able to access the values from parent. http://plnkr.co/edit/151kjGl5aOj4RaZ8EnVn?p=preview it showing as parent component is not specified...How can i correct the error? – abhilash reddy Feb 04 '16 at 15:51
@ThierryTemplier As you said we should be careful if we are using classes from separate files which causes cyclic dependency...But how can we solve cyclic dependency? Any suggestions brother? – abhilash reddy Feb 05 '16 at 04:37
@ThierryTemplier What if you want to have multiple parents, how will angular know which AppComponent to forward – johnny 5 Apr 23 '17 at 15:55

kit · Answer 2 · 2016-02-02T13:02:59.193

You would have to inject a service in parent component (in providers entry), set the value you want to use and than use it in child component.

@Component({
  selector: 'app',
  providers:[YourService]
  template: '<childCmp></childCmp>'
})
class AppComponent {
  constructor(private yourService: YourService) {
    this.yourService.setData(data);
  }
}

@Component({
  selector: 'childCmp',
  template: '{{yourService.getData()}}'
})
class ChildCmp {
  constructor(private yourService: YourService) {
    this.yourService.setData(value);
  }
}

How can i access the values from parent component in angular2 using dependency injection?

2 Answers2

Linked