Materialize: Materialize Select with Angular not working (browser-default does)

[timrate]

Bug Description

When using the material select box with angular either through ng-repeat or by using ng-model and ng-options the strings do not populate the options within the box. If I add class="browser-default" to the select it does work.

To clear up potential concerns, I am able to fill material select boxes with static options, so the javascript is enabled properly, and I am able to display objects from angular factories so that is enabled and working properly as well.

Expected Behavior

Select box options should be generated from angular object.

Current Behavior

Select box options do not populate, select box opens but no options appear.

Steps to Reproduce (for bugs)

Not Working
<select ng-model="configTimezone" material-select> <option ng-repeat="configTimezone in configTimezones">{{configTimezone.name}}</option> </select>

Working
<select class="browser-default" ng-model="configTimezone" material-select> <option ng-repeat="configTimezone in configTimezones">{{configTimezone.name}}</option> </select>

Context

I really like materialize and the fact that it makes it easier to make a decent looking web app (I'm not very good at design) having to use the browser-default select box breaks the look of using materialize for the forms I have.

Your Environment

• Version used: 0.100.1
• Browser Name and version: Chrome 59.0.3071.115
• Operating System and version (desktop or mobile): desktop

[DanielRuf]

Can you make a diff between both generated markups and describe when you call / initialize the Materialize component?

[Dogfalo]

You have to initialize the select after all the options are loaded.

[Dogfalo]

You're running the initialization too early before the dom elements are ready from Angular. https://codepen.io/Dogfalo/pen/wqEXjP

[Dogfalo]

That is a separate issue which is a bit more complicated: #2838

[Plmeks]

When you re using materialize with angularjs, every time u init some materialize elements - do it like this:

angular.element(document).ready(function () {
$('.modal').modal();
$('select').material_select();
});

Not working with jquery document ready, but fine with angular one. Checked this in plunker, the same result:
Plunkr

[rexsateesh]

Its working for me but its temporary hack

*.component.html

<div class="input-field col s12">
      <select formControlName="status" [(ngModel)]="selectedStatus" data-model="selectedStatus" class="select">
          <option [ngValue]="" disabled>Select</option>
          <option [ngValue]="1">Enable</option>
         <option [ngValue]="0">Disable</option>
     </select>
 <label>Status</label>
</div>

*.component.ts

ngAfterViewInit() {
        const self = this;
        jQuery(document).on('change', 'select', function(){
            var v = $(this).val().split(': '), model = $(this).attr('data-model');
            if(typeof v[1] != 'undefined') {
                self[model] = v[1];
            }
        });
 }

[DanielRuf]

What do you mean with hack? There is no automatic twoway binding on the generated markup. Also there are angular-materialize repositories.

[DanielRuf]

Also the change is triggered by the component. It does look for me like this is directly related to the issue which is described in the first comment.

[rexsateesh]

@DanielRuf There is automatic way i have found. Please once try with this code. Its working fine for me.

<div class="input-field col s12">
    <select formControlName="status" [(ngModel)]="selectedStatus" materialize="material_select">
        <option [ngValue]="" disabled>Select</option>
        <option [ngValue]="1">Enable</option>
        <option [ngValue]="0">Disable</option>
    </select>
    <label>Status</label>
</div>

[DanielRuf]

@rexsateesh I'm just doing some support here.

[troncomputers]

It's still not working for me. There is an <ul> tag with elements based on <option> tags.
This I generate with *ngFor

<div class="select-wrapper">
<input class="select-dropdown dropdown-trigger" type="text" readonly="true" data-target="select-options-950126f2-fb60-3e8c-12f7-3e5852b364c6">
<ul id="select-options-950126f2-fb60-3e8c-12f7-3e5852b364c6" class="dropdown-content select-dropdown" tabindex="0" style=""></ul>
<svg class="caret" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>
<select _ngcontent-c1="" id="formyPlatnosci" name="formaPlatnosci" required="" ng-reflect-required="" ng-reflect-name="formaPlatnosci" class="ng-untouched ng-pristine ng-invalid" tabindex="-1">
<option _ngcontent-c1="" value="2" ng-reflect-value="2">czek</option>
<option _ngcontent-c1="" value="1" ng-reflect-value="1">gotówka</option>
<option _ngcontent-c1="" value="5" ng-reflect-value="5">inna</option>
<option _ngcontent-c1="" value="4" ng-reflect-value="4">kredyt</option>
<option _ngcontent-c1="" value="3" ng-reflect-value="3">przelew</option>
</select></div>

This is static generation

<div class="select-wrapper">
<input class="select-dropdown dropdown-trigger" type="text" readonly="true" data-target="select-options-d35a4393-018e-286b-9412-17f6610bede9">
<ul id="select-options-d35a4393-018e-286b-9412-17f6610bede9" class="dropdown-content select-dropdown" tabindex="0" style="">
<li id="select-options-d35a4393-018e-286b-9412-17f6610bede90" tabindex="0"><span>gotówka</span></li>
<li id="select-options-d35a4393-018e-286b-9412-17f6610bede91" tabindex="0"><span>przelew</span></li>
<li id="select-options-d35a4393-018e-286b-9412-17f6610bede92" tabindex="0"><span>karta</span></li>
</ul>
<svg class="caret" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>
<select _ngcontent-c1="" id="formyPlatnosci" name="formaPlatnosci" required="" ng-reflect-required="" ng-reflect-name="formaPlatnosci" class="ng-untouched ng-pristine ng-invalid" tabindex="-1">
 <option _ngcontent-c1="" value="1" ng-reflect-value="1">gotówka</option>
<option _ngcontent-c1="" value="2" ng-reflect-value="2">przelew</option>
<option _ngcontent-c1="" value="3" ng-reflect-value="3">karta</option>
</select></div>

With Angular '*ngFor' the <ul> tag is not populated

[CristianMisake]

declara un $ para hacer referencia a jquey y usa el $('select').formSelect();
ten en cuenta que tienes que tener instalado jquery

import { Component, OnInit } from '@angular/core';
declare var $: any;

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent implements OnInit{

title = 'myJquery';



ngOnInit() {

   $(document).ready(function() {

        $('select').formSelect();

   });

}

}