Ion-select text depends on another ion-select

Ionic Framework ionic-v3
#1

I just solved a variant of a problem that has come up several times, but I’ve done it using a “private” method in ionic-angular. So I’m posting this either to help people with this issue, or to find out if someone else has a better solution.

Core problem: two ion-selects:

Select1: Sort by Name, Sort by Price
Select2: Either says A to Z, Z to A; or it says Low to High, High to Low

I want the text of Select2 to change immediately if the value of Select1 changes. Select2 returns “ascending” or “descending” to the program. What we care about is that the user never sees, “Sort by Name Low to High,” and never sees, “Sort by Price Z to A,” etc.

For the text, I created ascendingMap and descendingMap which were Map<string, string> so that for example a key/value entry of ascendingMap was (‘name’, ‘A to Z’). Then I had the Select2 template show ascendingMap.get(valueOfSelect1) and descendingMap.get(valueOfSelect1). The bigger issue was how to make that change happen instantly. And here’s the solution, which I think is new to the forum.

<ion-select (ionChange)="sortingKeyChanged()"> // this is part of Select1
<ion-select #sortingDirection> // this is part of Select2

ts file:

import { ChangeDetectorRef, ViewChild } from '@angular/core';
import { Select } from 'ionic-angular';

export class MyClass {
  @ViewChild('sortingDirection') sortingSelect: Select;

  constructor(private cdr: ChangeDetectorRef) {}

  sortingKeyChanged() {
    this.cdr.detectChanges();
    this.sortingSelect._inputUpdated();
  }
}

This works well, and I think it solves problems for people. My concern is the use of the “private” method of Select, but I haven’t gotten the behavior I want from the public methods, so at this point I am going to mark this as solved and move on. If you have a better solution please let me know.

#2

Any chance you’re using push change detection here? I know you’re a fan of it, and it may be creating unusual extra work for you in this instance. In my experience, detectChanges() is all that’s required for this to work. See for example this.

#3

I’m using onPush globally, yes. I could try changing it inside the component that contains these selects, don’t know what effect that would have on a page the component appears in. However, it looks as though the only extra work in my code is the use of ViewChild and the call to _inputIUpdated(). (Not counting all the time I just put in going down wrong paths.) Do you see more? At the moment I don’t see a big hit I’m taking compared to your code.

#4

Sorry, not questioning performance, but rather whether there’s a chance that your _inputUpdated() call is being necessitated by use of onpush, so perhaps people with ordinary change detection need only call detectChanges().

#5

I’m expect that’s true. My OP solves an even tinier problem than I realized. Oh well, it was big to me for a moment!

1 Like
#6

Au contraire. If we’re right, it will help everybody puzzled by cascading selects and alternate change detection strategies.