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-24 07:19:37Z

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, 2017 at 7:19

answered Feb 2, 2016 at 12:49

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

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

6 Comments

abhilash reddy Over a year ago

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?

Thierry Templier Over a year ago

Yes, you can leverage the two-way binding support for custom components. See this answer: stackoverflow.com/questions/35154793/….

Mark Rajcok Over a year ago

@abhilashreddy, if you just want to share data between the parent and child, simply use a (reference type) child input property: see stackoverflow.com/a/34208500/215945. In general, you should avoid injecting parents into children, as it results in coupling.

abhilash reddy Over a year ago

@Thierry Templier when i separate the parent and child component i am not able to access the values from parent. plnkr.co/edit/151kjGl5aOj4RaZ8EnVn?p=preview it showing as parent component is not specified...How can i correct the error?

abhilash reddy Over a year ago

@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?

|

kit · Accepted Answer · 2016-02-02 13:02:59Z

0

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);
  }
}

edited Feb 2, 2016 at 13:02

answered Feb 2, 2016 at 12:51

kit

4,9203 gold badges26 silver badges23 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related