Multiple select in materialize-css with angular2 not rendering dynamic values

Question

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);
  }

Can you try to reproduce with this Plunker plnkr.co/edit/sQGRzC?p=preview ? — Günter Zöchbauer
– Günter Zöchbauer, Commented Apr 29, 2016 at 9:19
hi.. haven't used plunkr yet.. how can i add materialize-css and angular2-materialize in that plunkr? — noobProgrammer
– noobProgrammer, Commented Apr 30, 2016 at 9:11
thanks a lot , but its and issue with angular2-materialize itself and the guy is working on it on github.. willl put the answer when its done current workaround is $('#select').material_select() — noobProgrammer
– noobProgrammer, Commented May 1, 2016 at 15:09

Rubyboy · Accepted Answer · 2016-05-04 04:56:12Z

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>

answered May 4, 2016 at 4:56

Rubyboy

912 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Multiple select in materialize-css with angular2 not rendering dynamic values

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related