question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Ionic v4: Re-add compareWith property to ion-select

See original GitHub issue

Bug Report

Ionic Info Run ionic info from a terminal/cmd prompt and paste the output below.

cli packages: (/usr/local/lib/node_modules)

   @ionic/cli-utils  : 2.0.0-rc.6
   ionic (Ionic CLI) : 4.0.0-rc.6

local packages:

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

System:

   NodeJS : v8.11.1
   npm    : 6.1.0
   OS     : macOS High Sierra

Describe the Bug ion-select is missing the compareWith Angular property in ionic-angular v4, previously working in v3 with PR #11965.

Steps to Reproduce Steps to reproduce the behavior:

  1. Add an <ion-select> element with [compareWith]="compareFunction".
  2. The following error is thrown in the console:
Can't bind to 'compareWith' since it isn't a known property of 'ion-select'.
1. If 'ion-select' is an Angular component and it has 'compareWith' input, then verify that it is part of this module.
2. If 'ion-select' 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.

Related Code If you are able to illustrate the bug with an example, please provide a sample application via an online code collaborator such as StackBlitz, or GitHub.

Expected Behavior To be able to bind to compareWith in an ion-select.

Additional Context Angular docs for compareWith

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:9
  • Comments:18 (7 by maintainers)

github_iconTop GitHub Comments

5reactions
FdezRomerocommented, Jun 12, 2018

@izio38 I wish it were that easy! 😅

For starters, this._compareWith is not defined (not a big deal). But the part I have doubts about is where the compare function should be used as the functionality has now been split between valueChanged() and optLoad().

I’m not sure how the option elements and the select play together, as they now emit a ionSelectOptionDidLoad custom event.

That’s why I decided to open this issue instead of a PR.

Thanks, Rodrigo

4reactions
remisturecommented, Feb 4, 2019

When will this be merged?

Read more comments on GitHub >

github_iconTop Results From Across the Web

ion-select: Select One or Multiple Value Boxes or Placeholders
ion-select is represented by selected value(s), or a placeholder, and dropdown ... by providing a property name or a function to the compareWith...
Read more >
Ionic 4: Set default ionic ion-select option - Stack Overflow
When the options list contains objects, you need to use [ngValue] and [compareWith] Try this code: <ion-select name="measureSetSelect" ...
Read more >
SelectControlValueAccessor - Angular
To use a select in a template-driven form, simply add an ngModel and a name attribute to the main <select> tag. content_copy import...
Read more >
ionic-selectable - npm
An Ionic component similar to Ionic Select, that allows to search items, including async search, group, add, edit, delete items, ...
Read more >
Ionic Release: 4.1 Hydrogen Out Now!
A new compareWith property was added to ion-select that would either ... This was a feature in Ionic 3 and is now added...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found