Ion-select in popover - No reaction when clicking item

Ionic Framework ionic-v3
1

I have created a popover which contains a ion-select. Unfortunately, when I try to click on one of the item of the list, nothings happens

@Component({
    template: '' +
    '<ion-list>' +
    '   <ion-item>' +
    '       <ion-label>{{"language"|translate}}</ion-label>' +
    '       <ion-select [(ngModel)]="locale" (ngModelChange)="onChangeLocale($event)">' +
    '           <ion-option value="fr">{{"french" | translate}}</ion-option>' +
    '           <ion-option value="en">{{"english" | translate}}</ion-option>' +
    '       </ion-select>' +
    '   </ion-item>' +
    '</ion-list>'
})

export class MyPopover {

    locale:String = 'fr';

    constructor(userService:UserService) {
        var user = userService.getUser();
        //this.locale = user.language;
    }

    onChangeLocale(ev) {
        console.log('onChangeLocale');
    }
}


@Component({
    selector: 'popover-change-locale',
    template: `
    <ion-buttons end>
        <button (click)="showPopover($event)">
            <ion-icon name="more"></ion-icon>
        </button>
    </ion-buttons>`,
})

export class PopoverChangeLocale {


    constructor(private nav:NavController) {
    }

    showPopover(ev) {
        let popover = Popover.create(MyPopover);
        this.nav.present(popover, {
            ev: ev
        })
    }

}
2

and where is the ion-select ?
first u hv to be sure is it the ion-select not working on the binding, or there’s sth wrong with your popup doesnt really working at all.

/*Pop Starts*/
presentPopover(myEvent) {
    let popover = Popover.create(languagePopup,{
      langset: this.langset, 
//I hv a variable containing the default language passing to the popup
      languageArray: this.languageArray, 
//an array set of language i let user to choose from
}, {cssClass: 'languageselector'}); 
// add css class name just so i can make it look pretty later
this.navController.present(popover, {
  ev: myEvent
});
popover.onDismiss(data => {
  console.log("data is",data.selecteditem); 
//okay, here i just wanna make sure the selected item sends back the chosen language, so if anything goes wrong at least i know if data got carried back to the page 
      if (data){
 //(data) is whatever get passed from the popup to the page
        this.locale = null;
//clear item pre defined value, just in case
        this.globalVar.userlocale = data.selecteditem;
 //I use a global variable to store user selected language
        this.locale = this.globalVar.userlocale;
        this.loadLanguage(this.locale); // if u hv created a function to load sth
      }
    });
  }
3

Would you be able to replicate this in a plunkr?

4

Please have a look here http://plnkr.co/edit/9HzRACx9HRbeE7ffitBS?p=preview

Click on the button in the toolbar at the right in the home page. Nothing happens if I click on cancel or ok
Uploading…

5

not sure if it’s becuz it wont work in a popover, or some file is missing during build.

I tried creating a ion-select in the home.html with hard code without using a template, it can close and be selected normally but the text label didnt get rendered

image.

6

I’m personally not able to use TranslateService nor TranslatePipe in my popover Components… It seems like they’re instantiated “apart” from the app. No configuration is kept, services globally injected are not available, etc.