Load options of select only after (click)

Basically, I have a default value, which I want to load into select and make a call to API and load the rest only if select is clicked.

<select (click)="getSubevents(market_uri)"><option *ngFor="let subevent of subevents" [selected]="subevent.selected" [value]="subevent.market_url">{{subevent.subevent_name}}</option></select>

ngOnInit(): void {    combineLatest([this.routes.params, this.routes.queryParams])      .subscribe(([parameters, queryParams]) => {        this.subevents.push({'subevent_name': parameters['subevent-name'],'selected': '0','market_url': this.market_uri        });      });  }  getSubevents(market_uri: string) {    console.log(market_uri);    this.subevents.push({'subevent_name': "hello",'selected': '0','market_url': this.market_uri    });

This works, but when I click on select it closes dropdown, but new item appears in the list.

I guess what I am looking for is sync loading, once (click)="getSubevents(market_uri)" it has to append few items subevents array and only after that *ngFor="let subevent of subevents" has to load.