Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular2 inject parent service into child

Given I have simple app component:

import {Component} from 'angular2/core';
import {bootstrap}    from 'angular2/platform/browser';
import {AppComponent}    from 'ng2-easy-table/app/app.component';
import {ConfigService} from "./config-service";

@Component({
  selector: 'app',
  directives: [AppComponent],
  providers: [ConfigService],
  template: `
    <ng2-table [configuration]="configuration"></ng2-table>
  `
})
export class App {
  constructor(private configuration:ConfigService) {}

}
bootstrap(App, []);

and ng2-table, which is being installed via npm install, and is placed in node_modules directory.

import {Component, OnInit, Input} from 'angular2/core';

@Component({
  selector: 'ng2-table',
})

export class AppComponent implements OnInit{
  @Input configuration;
  constructor() {
    console.log("configuration: ", this.configuration); // <-- null
  }

  ngOnInit() {
    console.log("configuration: ", this.configuration); // <-- null
  }
}

and this config service:

import {Injectable} from "angular2/core";
@Injectable()
export class ConfigService {
    public searchEnabled = true;
    public orderEnabled = true;
    public globalSearchEnabled = true;
    public footerEnabled = false;
    public paginationEnabled = false;
    public exportEnabled = true;
    public resourceUrl = "http://beta.json-generator.com/api/json/get/E164yBM0l";
}

In the app component I put ng2-table component. ng2-table and app are root components, so I am not allowed to use @Input() (this is the reason why [configuration]="configuration" does not work (following this answer https://stackoverflow.com/a/33155688/1168786).
The question is - how do I inject some service from app component into ng2-table component, but not using @Input().

How do I pass some config to my ng2-table, or even easier, how can I initialise component from node_modules which expects some config in constructor?

This is component link: https://github.com/ssuperczynski/ng2-easy-table/tree/master/app

like image 203
ssuperczynski Avatar asked Apr 09 '16 14:04

ssuperczynski


People also ask

How is data passed from parent to child?

While there is no direct way to pass data from the child to the parent component, there are workarounds. The most common one is to pass a handler function from the parent to the child component that accepts an argument which is the data from the child component.

Can we pass function from parent to child in Angular?

@Input Decorator: This is used to define an input property and it is used to send data from parent component to child component. @Output Decorator: This is used to bind a property of the type of Angular EventEmitter class and it is used to pass data from child component to parent component.


2 Answers

Angular's dependency injection will provide the same instance of ConfigService to the child component as the parent component as long as it's not explicitly specified in the child component's providers property. This is due to Angular's hierarchal DI model, you can find more information in their docs. Based on the code samples, it looks like ConfigService might not using DI so you might want to look at turning it into an Injectable as well: DI info

like image 187
James Salas Avatar answered Sep 21 '22 18:09

James Salas


@Input in @Input configuration; is missing () it should be

@Input() configuration;

I copied your code to the Plunker and adding () fixed it.

Plunker example

like image 20
Günter Zöchbauer Avatar answered Sep 21 '22 18:09

Günter Zöchbauer