ngModel on select not showing initial, default value

user_857747 0
Viewed 4238

I have following Angular code:

comp.html

<select [(ngModel)]="selectedBanner" (change)="onBannerChange()">
                    <option *ngFor="let banner of banners" 
                    [ngValue]="banner">{{banner.BannerDesc}}</option>

                </select>

comp.ts

    public banners: any[] = [
        {BannerId: 1, BannerDesc: 'AAAA'},
        {BannerId: 2, BannerDesc: 'BBBB'},
        {BannerId: 3, BannerDesc: 'CCCC'},
        {BannerId: 4, BannerDesc: 'DDDD'},
    ];
    public selectedBanner: any = {BannerId: 3, BannerDesc: 'CCCC'};
    onBannerChange() {
        console.log(this.selectedBanner);
    }

However, on load, the select dropdown is always blank. Only when I change, it gets the value. How can I set the default value on load?

I am using angular 4.0.0

ngmodel angular select
4 Answers

It is also important that initial value which you're assinging to ngModel variable should be a number. If it is not a number then use parseInt(value);

user_84379820
Related