3

I am using angular2-materialize with materialize-css to work with angular2. Everything works fine even the normal select component . the problem is with multiple select it doesn't render the dynamic values , I don't understand if its the issue with the initializing object or something else as it works for a normal select but if i add static options and after rendering if I click that option then change event is called and then if I click it again all those dynamic values gets added to the combo.

Below is my code but if there is not any proper solution i can work with any workaround or any other framework than materialize-css which is tested and works proper with angular2.

  <div class="form-group">
            <!--if i remoe multiple it works-->
            <select 
                    materialize="material_select"  
                    multiple 
                    (ngModelChange)="change($event)" 
                    [ngModel]="prodmodel.CategoryId"
                    ngControl="CategoryId" #catid="ngForm">
                <!--This options are not rendering-->
                <option *ngFor="#p of categories"
                        [value]="p.id">
                    {{p.CategoryTitle}}
                </option>
                <!--This option will render and if i click it above options will render too but not in oproper way-->
                <option value="0">chhose</option>
            </select>
            <label>select Category </label>
        </div>

My function to get categories:

    getCategories() {
    this._Categories.getCategories()
        .subscribe(
        Categories=> this.Categories= Categories,
        error => this.errorMessage = <any>error);
  }
danday74
  • 52,471
  • 49
  • 232
  • 283
noobProgrammer
  • 2,884
  • 3
  • 17
  • 20

1 Answers1

4

This is solved now with the latest version of angular2-materialize. See bug and fix details here: https://github.com/InfomediaLtd/angular2-materialize/issues/21

This is how you can trigger updates to select option elements (using materializeSelectOptions):

<select materialize="material_select" [materializeSelectOptions]="selectOptions">
  <option *ngFor="let option of selectOptions" [value]="option.value">{{option.name}}</option>
</select>
Rubyboy
  • 91
  • 2