Suppose I have a 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 it includes the ng2-table component, which is installed via npm install and resides in the 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
}
}
In addition, there is a configuration 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";
}
Within the app component, the ng2-table component is utilized. Both of these components are root components, making it impossible to use @Input() (which explains why [configuration]="configuration" does not function as expected). The main query is - how can a service be injected from the app component into the ng2-table component without using @Input().
How can some configuration data be passed to the ng2-table, or alternatively, how can a component from the node_modules be initialized that requires specific configurations in its constructor?
Here is the link to the component: https://github.com/ssuperczynski/ng2-easy-table/tree/master/app