Ionic 4 - using [color] attribute in ion-col throws error


#1

Hi all,

I’m currently migrating a project from Ionic 3.9.2 to Ionic 4.0.0-alpha.7, and have hit an error in 4 which doesn’t occur in 3.

I’ve been using [color] as follows for dynamically updating the colour of a element, where ‘item_status’ is a variable value defined in the page’s corresponding .ts file …

<!-- html page -->

<ion-col ion-button [color]="item_status" >
	<!-- some text in here -->
</ion-col>

When running ionic serve --platform="ios" (output to Chrome browser) the results are as follows…

In Ionic 3.9.2 all is fine, the colour is pulled through and displayed correctly, no error.

In Ionic 4.0.0-alpha.7 I receive the following error message in the Chrome developer console, and it fails to load:

Error: Template parse errors:
Can’t bind to ‘color’ since it isn’t a known property of ‘ion-col’.

  1. If ‘ion-col’ is an Angular component and it has ‘color’ input, then verify that it is part of this module.
  2. If ‘ion-col’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.
  3. To allow any property add ‘NO_ERRORS_SCHEMA’ to the ‘@NgModule.schemas’ of this component.

It’s a pretty verbose error output, which is great in providing avenues to investigate, but I’m interested to know if this is a bug in the 4.0.0-alpha.7, or something that has come about through the new stencil web component overhaul for ionic 4, and I should indeed follow the suggestions in the error message?

I’m trying to get clarification on the above before I invest a lot of time on the rest of the update, as I use this approach for dynamic colouring in many places. I haven’t unearthed anything in existing Ionic 4 documentation I’ve managed to find, hence the query.

Potential causes

From Ionic Github Breaking changes

Button should now be written as an element. Ionic will determine when to render an anchor tag based on the presence of an href attribute.

Perhaps the change of ion-button no-longer being used as an attribute on the button element has potentially affected its use elsewhere?

System information

OS : macOS Sierra

Ionic 3

ionic info

  • @ionic/app-scripts : 3.1.9
  • Ionic Framework : ionic-angular 3.9.2

package.json dependencies

"dependencies": {
	"@angular/common": "5.2.10",
	"@angular/compiler": "5.2.10",
	"@angular/compiler-cli": "5.2.10",
	"@angular/core": "5.2.10",
	"@angular/forms": "5.2.10",
	"@angular/http": "5.2.10",
	"@angular/platform-browser": "5.2.10",
	"@angular/platform-browser-dynamic": "5.2.10",
	"ionic-angular": "3.9.2",
	"sw-toolbox": "3.6.0",
	"zone.js": "0.8.26"

Ionic 4

ionic info

@angular-devkit/core : 0.6.0
@angular-devkit/schematics : 0.6.0
@angular/cli : 6.0.8
@ionic/schematics-angular : 1.0.0-rc.8
Ionic Framework : @ionic/angular 4.0.0-alpha.7

package.json dependencies

    "@angular/common": "6.0.4",
    "@angular/core": "6.0.4",
    "@angular/forms": "6.0.4",
    "@angular/http": "6.0.4",
    "@angular/platform-browser": "6.0.4",
    "@angular/platform-browser-dynamic": "6.0.4",
    "@angular/router": "6.0.4",
    "@ionic/angular": "4.0.0-alpha.7",
    "@ionic/schematics-angular": "latest",
    "core-js": "^2.5.3",
    "zone.js": "^0.8.26"

If there’s any other information I can provide that would help clarify the issue or environment, please let me know. Thanks for your time and any help you can provide :slight_smile: .

I’ve looked into workarounds in the form of using ngStyle and the like, but in this thread I’m purely interested in finding out whether or not this is a bug in the Ionic 4.0.0-alpha.7 build, or intended new behaviour that I need to adapt to.

Cheers,

S