CODEWITHSUNDEEP
angulartypescriptangular6semantic-uingmodel
7ball
7ball

Reputation: 2315

Angular sui-select options not updating when options model changes

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?

Upvotes: 1

Views: 1077

Answers (1)

MCMatan
MCMatan

Reputation: 8863

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"

Upvotes: 2

Related Questions