Angular2 inject parent service into child

Issue

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

Solution

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

@Input() configuration;

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

Plunker example

Answered By – Günter Zöchbauer

Answer Checked By – Cary Denson (AngularFixing Admin)

Leave a Reply

Your email address will not be published.