Ion-select and default values (ionic 4) [Solved]

Ionic Framework
1

Hi all,

sorry for surely a dumb question already answered 1000 times maybe, but I washed the net and forums and didn’t have a CLEAR and SIMPLE answer to my quest :cry:

What I want to do :

  • use ion-select selector
  • use [(NgModel)] to store selected value
  • with options in an *ngFor loop
  • set as default value selected one of these values

I tried to use “selected” attribute in ion-select-option but does not seem to work
I tried to use the compareWith feature but didn’t manage to understand how to have it fulfill the default value stuff.
I tried to use the “value” attribute in ion-select, didn’t work either

I noticed that when I don’t use the [(NgModel)] stuff, the “value” attribute works just fine to set the default selected value, but I don’t get the utility of having a selector without storing back the selected value (or maybe there is another way, i m not an Angular guru)

Thanks forward for your help, if you could give a clear example, explained like for a 5-year old child it would be perfect.

Have a nice day all :slight_smile:

2

Hey,

Use below trick. I think this should be help you…

In HTML:

<ion-select [compareWith]="compareWith" value="years.id == 1" >
            <ion-select-option *ngFor="let year of years">{{year.name}}
</ion-select-option>
</ion-select>

In TS:

 years: any[ ] = [
    {
      id: 1,
      name: '2019'
    },
    {
      id: 2,
      name:'2018'
    },
    {
      id: 3,
      name:'2017'
    },{
      id:4,
      name:'2016'
    }
  ];

  compareWithFn = (o1, o2) => {
    return o1 && o2 ? o1.id === o2.id : o1 === o2;
  };

  compareWith = this.compareWithFn;
2 Likes
3

H Priyanka and thanks a very lot, i m gonna try this right away :slight_smile: <3

4

Sorry to say, but this doesn’t work (tried it on Firefox and Chrome).

What is the behaviour ?

  • When I load the page, effectively there is a value displayed in the select
  • But when I click on the select, and change the value, it stays on the first value
  • Other thing when I change the id of the year I wanna be selected by default (for example : change to
value="years.id == 2"

in HTML code), it stills displays the first value of the list (i.t.s. ‘2019’ in your example) like if the condition was not evaluated.

  • last thing : I put some console.log in CompareWithFn, to display o1.id and o2.id, each time it’s called, the console display is “undefined”

Are you sure about your code ?

thanks forward again

5

OK I solved it !

Based on Pryanka’s code, i corrected it :

In HTML:

<ion-select [compareWith]="compareWith" value="{{MyDefaultYearIdValue}}" >
            <ion-select-option *ngFor="let year of years" value="{{year.id}}">{{year.name}}
            </ion-select-option>
</ion-select>

In TS:

/// In declarations : 

years: any[ ] = [
    {
      id: 1,
      name: '2019'
    },
    {
      id: 2,
      name:'2018'
    },
    {
      id: 3,
      name:'2017'
    },{
      id:4,
      name:'2016'
    }
  ];

compareWith : any ;
MyDefaultYearIdValue : string ;

///// In functions declaration zone

  compareWithFn(o1, o2) {
    return o1 === o2;
  };

//// added in  ngOnInit

  this.MyDefaultYearIdValue = "2" ;
  this.compareWith = this.compareWithFn;
4 Likes
6

Thanks @Maestropikal

7

You’re welcome :slight_smile: thank you for first answering.

Thing that I noticed though, is that whenever you include a [(NgModel)] inside the ion-select, this does not work anymore, and it seems to be unavoidable in Ionic 4 (really hope they will work on this !)

I found a workaround though by modifying the model inside an (ionChange) function

This gives, starting from my preceeding posted example (ensure to change MyDefaultYearIdValue type to any instead of string, didn’t figure out initially that string type wasn’t mandatory…) :

in HTML :

<ion-select (ionChange)="onSelectChange($event)" [compareWith]="compareWith" value="{{MyDefaultYearIdValue}}" >
            <ion-select-option *ngFor="let year of years" value="{{year.id}}">{{year.name}}
            </ion-select-option>
</ion-select>

in TS:

  ////// In variables definitions
  SelectedYearIdValue : any ;

  ///// In initialisations (in my case it's in ngOnInit() function)
  this.SelectedYearIdValue  = this.MyDefaultYearIdValue ;

  ///// In functions definitions
  onSelectChange(selectedValue: any) {
    this.SelectedYearIdValue = selectedValue.detail.value ;
  }
2 Likes
8

Thanks working working working

9

Very great solution ever!
You make my day Maestropika

10

for people using [(ngModel)] in ion select and not using loop the code will be as follows :

//HTML

<ion-select class="ion-select-padding" name="size" [(ngModel)]="areaUnit" required>

   <ion-select-option value="Sq.Ft.">Sq.Ft.</ion-select-option>

   <ion-select-option value="Acres">Acres</ion-select-option>

</ion-select>

//TS file:
//initializing variable

areaUnit:string = "Sq.Ft.";  //the string in this variable must match the "value" in ion-select-option
11

I would remove the selected attribute. Bottom line: only have one source of truth in any given situation. When the selected attribute is present in addition to the ngModel binding, you have two.

12

I’m new to ionic angular. Thank you @rapropos for correction. I’ve edited my comment.

13

@Priyanka34 thank you very much, this has worked for me on Ionic 5.