Hi,
I’m trying to use ngStyle to create dynamique background color. But since my passing to ionic rc4 I’m not able to use these directive correctly …
Error:
polyfills.js:3 Unhandled Promise rejection: Template parse errors:
Can't bind to 'ngStyle' since it isn't a known property of 'ion-navbar'.
1. If 'ion-navbar' is an Angular component and it has 'ngStyle' input, then verify that it is part of this module.
2. If 'ion-navbar' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
planning.html
<ion-header>
<ion-navbar [ngStyle]="style.header">
<button menuToggle [ngStyle]="style.header">
<ion-icon name="menu"></ion-icon>
</button>
<ion-title [ngStyle]="style.header">Planning</ion-title>
</ion-navbar>
</ion-header>
planning.module
import { NgModule } from '@angular/core';
//import { CommonModule } from ' @angular/common/index';
import { PlanningPage } from './planning.page';
//import { PlanningService } from './PlanningService';
import { IonicModule, } from 'ionic-angular';
import { HelperModule } from '../../helper/helper.module';
@NgModule({
imports: [HelperModule, IonicModule.forRoot(PlanningPage),
],
exports: [],
declarations: [PlanningPage],
entryComponents: [PlanningPage],
//providers: [PlanningService],
})
export class PlanningModule { }
So I don’t really know where the problem come from …
My package.json’s dependencies:
"dependencies": {
"@angular/common": "2.2.1",
"@angular/compiler": "2.2.1",
"@angular/compiler-cli": "2.2.1",
"@angular/core": "2.2.1",
"@angular/forms": "2.2.1",
"@angular/http": "2.2.1",
"@angular/platform-browser": "2.2.1",
"@angular/platform-browser-dynamic": "2.2.1",
"@angular/platform-server": "2.2.1",
"@ionic/storage": "1.1.6",
"ionic-angular": "2.0.0-rc.4",
"ionic-native": "2.2.11",
"ionicons": "3.0.0",
"rxjs": "5.0.0-beta.12",
"zone.js": "0.6.26"
},
"devDependencies": {
"@ionic/app-scripts": "0.0.47",
"typescript": "2.0.9"
},
Am I supposed import additional Angular modules ?
Thanks !
EDIT:
Need to import IonicModule
and add to import in each module
import { NgModule } from '@angular/core';
import { PlanningPage } from './planning.page';
import { IonicModule, } from 'ionic-angular';
import { HelperModule } from '../../helper/helper.module';
@NgModule({
imports: [HelperModule, IonicModule.forRoot(PlanningPage),
],
exports: [],
declarations: [PlanningPage],
entryComponents: [PlanningPage],
//providers: [PlanningService],
})
export class PlanningModule { }