Use a service inside a decorator in Angular 4
I have a service as a config file where I store all the components that I want to use in my application. All these components need to be loaded into entryComponents from my main component. I want to load an array of components from a service into a main component decorator.
@Injectable() // This is the service, I want to call getComponents() later on.
export class Configuration {
modules = [
ChartModule
]
components = [
PiechartComponent
]
getModules(): NgModule[] {
return this.modules;
}
getComponents(): Component[] {
return this.components;
}
};
In the main component, I want the following:
@Component({
selector: 'dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.css'],
entryComponents: Configuration.getComponents() // Here I call the service.
})
Please, help!
source to share
I solved this problem by making a trunk and a constant at the same time. This way I don't need to import all my components into the main module (and other files) and I have access to all the arrays and configurations I want to do.
import { TestModule } from './widgets/testmodule/test.module';
import { TestComponent } from './widgets/testmodule/test.component';
Since I want to have all modules and components in a separate config file, I put it in the trunk and constant at the same time. I am importing all modules and components in one place.
Now I will add all these modules and components to the arrays. Later, I will use these arrays in the decorators of the main module and component.
export const initialization: ConfigurationConfig = {
modules: [
TestModule,
AnotherModule,
CarModule,
PocModule
],
entryComponents: Array<any> = [
TestComponent,
AnotherComponent,
CarComponent,
PocComponent
];
}
In my main module, I can now import this constant with all imports from the trunk.
import * as Configuration from './configuration.barrel';
@Component({
selector: 'df-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss'],
entryComponents: Configuration.initialization.entryComponents
})
source to share