Can't bind to 'ngStyle' since it isn't a known property of 'ion-navbar' (SOLVED)


#1

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 ! :slight_smile:

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 { }