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

@seanbrice wrote:

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 .

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

Posts: 1

Participants: 1

Read full topic