I have reviewed this question, this question, and this question. However, none of them seem to provide a straightforward solution for what I am searching for.
<ion-list>
<ion-item>
<ion-label>Select Book</ion-label>
<ion-select [(ngModel)]="selectbook" value="Return">
<ion-option value="Hobbit">The Hobbit</ion-option>
<ion-option value="Fellow">The Fellowship of the Ring</ion-option>
<ion-option value="Towers">The Two Towers</ion-option>
<ion-option value="Return" selected="true">The Return of the King</ion-option>
</ion-select>
</ion-item>
</ion-list>
<ion-item>
<ion-label>Number of Hobbits</ion-label>
<ion-input type="number" [(ngModel)]="selecthobbits" [min]="1" [max]="150" value="1"></ion-input>
</ion-item>
There is also a button that, in the .ts file, utilizes this.selecthobbits and this.selectbook. However, my TypeScript does not recognize the default values properly (I keep getting the usual JavaScript undefined).
While this.selecthobbits consistently retrieves the correct information, this.selectbook only registers once an option is clicked on, even the default one. Thus, removing the default value seems like bypassing the purpose of having it in the first place.
Could someone clarify which syntax I should use (I have tried none, both, and each separately) to ensure TypeScript recognizes the default value correctly, or if there is another approach altogether? It appears I may need to import an additional module to access this functionality (e.g., [value] versus value?), but untangling these complexities feels daunting. Appreciate any help in advance!