How to inject provider into component?

Question

How to inject provider into container component in Angular2?

For example I have parent component:

@Component({
    selector: 'myForm',
    template: '<form><myForm-detail></myForm-detail></form>',
    directives: [ MyFormDetailComponent ]
})
export class MyFormComponent {
    ...
}

And container component:

@Component({
    selector: 'myForm-detail',
    template: '<input type="text">',
    providers: [ MyService ]
})
export class MyFormDetailComponent {
    constructor(s: MyService) {
        console.log(s); // return "undefined"
    }

    ...
}

How to inject MyService into MyFormDetailComponent?

Or you mean into MyFormComponent and not MyFormDetailComponent? — Thierry Templier, Apr 05 '16 at 10:41
What is the current behavior? Any error message? How does `MyService` look like? — Günter Zöchbauer, Apr 05 '16 at 10:41

score 1 · Accepted Answer · edited May 23 '17 at 11:46

If you want to inject the same service into both component, you can simply define MyService into the providers attribute of the parent component. This way (and because of hierarchical injectors), you will be able to inject it into the two components:

@Component({
    selector: 'myForm',
    template: '<form><myForm-detail></myForm-detail></form>',
    directives: [ MyFormDetailComponent ],
    providers: [ MyService ]
})
export class MyFormComponent {
  constructor(s: MyService) {
  }
  ...
}

(...)

@Component({
    selector: 'myForm-detail',
    template: '<input type="text">',
})
export class MyFormDetailComponent {
  constructor(s: MyService) {
    console.log(s);
  }
}

See this plunkr: https://plnkr.co/edit/rUBgioLtqIAfWNCkRnlN?p=preview.

If you want to know more about hierarchical injectors, you could have a look at this question:

What's the best way to inject one service into another in angular 2 (Beta)?

How to inject provider into component?

1 Answers1