Ion-select values not refreshed


I want to update the values of a ion-select when the user enters a value in a ion-searchbar and press enter. The ion-select values are correctly updated and I can see them on a console.log, but if I use the open() method of the ion-select ( in my code below), the select window is empty (no values are displayed).
Do you have any idea?
Thank you.

The HTML file:

<ion-content padding>
	<ion-searchbar [(ngModel)]="searchText" (change)="searchPlace()" [showCancelButton]="true" (ionCancel)="onCancel($event)" (ionClear)="onClear($event)"></ion-searchbar>
	<ion-label ng-if="selectedPlace.length > 0">{{ selectedPlace }}</ion-label>
		<ion-select #select [(ngModel)]="selectedPlace" (ionChange)="selectPlace()">
			<ion-option *ngFor="let place of places" value="{{ place }}">{{ place }}</ion-option>

The TS file:

import { Component, ViewChild } from ‘@angular/core’;
import { NavController } from ‘ionic-angular’;
import { Select } from ‘ionic-angular’;

selector: ‘page-home’,
templateUrl: ‘home.html’,
queries: {
select: new ViewChild(‘select’)
export class HomePage {
@ViewChild(‘select’) select: Select;
places: string = ;
selectedPlace: string = “”;
searchText: string = “”;

constructor(public navCtrl: NavController) {

initializeItems() {
    this.items = [
        'Buenos Aires',
        'Hong Kong',
        'Le Havre',
        'Los Angeles',
        'New York',
        'Panama City',
        'San Francisco',
        'Tel Aviv',
onCancel(event) {
onClear(event) {
resetSearchPlaces() {
    this.places = [];
searchPlace() {
    // set val to the value of the ev target
    let val = this.searchText;
    // if the value is an empty string don't filter the items
    if (val && val.trim() != '') {
        this.places = this.items.filter((item) => {
            return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
        if (this.places.length > 0) {

selectPlace() {
    this.searchText = "";



Could you recreate this in some sort of plunkr example?

This will help debug the issue a bit further

Sure, here is the link:

I updated app/ and app/

Thank you.

This looks thorny. If you don’t get any better answers, try injecting a ChangeDetectorRef in your constructor and call its detectChanges() method right before you open the select.


Thanks for the help, ChangeDetectorRef works :slight_smile:

What I did:
//Add the import
import { ChangeDetectorRef } from ‘@angular/core’;

//Add ChangeDetectorRef in constructor
constructor(public navCtrl: NavController, public cdr: ChangeDetectorRef) {

//Call detectChanges just before open()

Thank you so much for posting your solution… I ran into the same issue and having it so well detailed really helped me.