Angular sui-select options not updating when options model changes

Question

I'm using the Angular package for Semantic UI https://edcarroll.github.io/ng2-semantic-ui/#/getting-started

I have a searchable, dropdown select like so:

<sui-select class="selection" [options]="myOptionsModel" [isSearchable]="true" #questionSearch>
  <sui-select-option *ngFor="let option of questionSearch.filteredOptions" [value]="option"></sui-select-option>
</sui-select>

Whenever I update myOptionsModel, the options in the select don't update accordingly..(i.e. if I add or remove an item, the change doesn't get reflected)

Here's how I'm updating myOptionsModel: Upon a click event from some button, this function is called:

addOption(name: string, id: number) {
  this.myOptionsModel.push({name: name, id: id})
}

I've tried multiple approaches like using optionsLookUp but no luck.. Can you help?

Answer 1

You are trying to update an async object with sync logic.

myOptionsModel should be an observable Then you HTML template can bind to Its changes

TS file

myOptionsModel$: BehaviorSubject<MyObjectType[]> = new BehaviorSubject([]);

addOption(name: string, id: number) {
    const updatedModel = this.myOptionsModel$.value.concat([{id, name}])
    this.myOptionsModel$.next(updatedModel)
  }

HTML file

[options]="myOptionsModel$ | async"