Since upgrading to Angular 2 RC 5, I am asking some problems. I have 3 components (battery, signal and cards) that are used in another component. These 3 components are declared in one module: helpers module. Here is the code:
@NgModule({
declarations: [
SignalComponent,
BatteryComponent,
MapsComponent
],
imports : [
BrowserModule,
FormsModule
],
exports: [
SignalComponent,
BatteryComponent,
MapsComponent
]
})
export class HelpersModule {
}
The battery component is as follows:
@Component({
selector: 'as-my-battery',
template: `
<i class="fa fa-{{icon}}" aria-hidden="true"></i>
`
})
export class BatteryComponent {
@Input() level: number;
@Output() icon: string;
// constructor() { }
ngOnInit () {
if (this.level < 5) {
this.icon = 'battery-empty';
} else if (this.level >= 5 && this.level < 25) {
this.icon = 'battery-quarter';
} else if (this.level >= 25 && this.level < 50) {
this.icon = 'battery-half';
} else if (this.level >= 50 && this.level < 75) {
this.icon = 'battery-three-quarters';
} else {
this.icon = 'battery-full';
}
}
}
But when I try to use as-my-battery with an input level, I get this error:
Error: Uncaught (in promise): Template parse errors:
Can't bind to 'level' since it isn't a known property of 'as-my-battery'.
1. If 'as-my-battery' is an Angular component and it has 'level' input, then verify that it is part of this module.
2. If 'as-my-battery' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.
(""checkbox" name={{data.name}} value={{data.name}}> {{data.name}}
<as-my-battery [ERROR ->][level]='data.battery'></as-my-battery>
<as-my-signal [level]='data.signal'></as-"): a@19:35
Does anyone else have these problems and end up solving this problem?
I also found this topic, but that was not the answer for me: It is impossible to bind to “data”, because this is not a known property of “training data” '
And finally, this is the bootstrap of my application:
@NgModule({
declarations: [
AppComponent
],
imports: [
NavbarModule,
LoginModule,
HelpersModule,
KaartModule,
LijstModule,
LogsModule,
InstellingenModule,
StatistiekenModule,
routing
],
providers: [ APP_PROVIDERS, appRoutingProviders ],
bootstrap: [ AppComponent ]
})
export class AppModule {
}
LijstComponent, :
@NgModule({
declarations: [
LijstComponent
],
imports: [
BrowserModule,
HelpersModule
],
exports: [
LijstComponent
]
})
export class LijstModule {
}
LijstComponent:
@Component({
selector: 'as-lijst',
providers: [DataService, MarkerService, AlertService],
templateUrl: 'app/lijst/lijst.html',
})
export class LijstComponent {
...
}
html ( - * ngFor, ):
<as-my-battery [level]='data.battery'></as-my-battery>