Materialize: select not working with angular

[wayou]

the select form component not working with angularjs.

only works in browser-default mode.

but the browser default is not that elegant with other elements on the page :(

[Dogfalo]

You have to initialize dynamic elements after they are created.

[wayou]

sure i have initialized it.

what's more, i initialized it within a setTimeout to guarantee it is been initialized properly.

here's a plunker demonstrats the data binding problem.

[esalinas00]

I am having his same problem, please explain the work around.

[wayou]

can this be re-opened?

[Dogfalo]

What is the problem with the element?

[wayou]

hi @Dogfalo ,

have you checked the plunker?

basically the data-binding of angular is broken after the materialized style applied on the select element.
while you can see the working one below within the plunker for a reference.

[lauterry]

+1 Please reopen this issue

[yurtaev]

+1

[Cerealkillerway]

+1

[flamingm0e]

+1

I have been fighting this for a few hours now

[Dogfalo]

See https://github.com/Dogfalo/materialize/issues/706

[charlesc-ai]

+1 same kind of issue with select of angular-materialize, when choosing same option selected, the select doesn't close drop-down. But in class="browser-default", it works.
Please reopen this issue

[MorganChristison]

+1

[rogerwalt]

+1

[longstone]

+1

[yeager-j]

+1 I am also having this issue

[tomscholz]

Just writing "+1" doesn't do anything. We should move the conversation to https://github.com/Dogfalo/materialize/issues/4529

[arieltoledo]

Move to #2838 as its not working with angular or vue.

[rexsateesh]

Its working 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>