Pre-select first item of ion-select on page load


#1

I am trying to force the select dropdown pre-select the first item in the list on page load.

Here is my code. Other people say it works for them. No ideas why it does not work for me.

export class AddExpenseEntryPage {

bookKeepings = [
{ id: 1, title: "Book 1"}
{ id: 2, title: "Book 2"}
]

constructor(public navCtrl: NavController, public navParams: NavParams, private formBuilder: FormBuilder, private storage: Storage) {
    
    this.expenseEntryForm = this.formBuilder.group({
      book_keeping: ['', Validators.compose([Validators.required])],
    });

  }
    <form [formGroup]="expenseEntryForm" >

        <ion-item>
          <ion-label floating>Book Keeping</ion-label>
          <ion-select formControlName="book_keeping" [multiple]="false">
            <ion-option *ngFor="let bookKeeping of bookKeepings; let i = index" [value]="bookKeeping.id" [selected]="i === 0 ">{{bookKeeping.title}}</ion-option>
          </ion-select>
        </ion-item>

#2
  1. Remove [selected]="i === 0 "
this.expenseEntryForm = this.formBuilder.group({
      book_keeping: [this.bookKeepings[0].id, Validators.compose([Validators.required])],
});