this.chipInputElement.material_chip is not a function

[nssantos]

Current Behavior

When I try to use mz-chip-input feature, I get the following error on console:
core.js:1673 ERROR Error: Uncaught (in promise): TypeError: this.chipInputElement.material_chip is not a function TypeError: this.chipInputElement.material_chip is not a function at MzChipInputComponent.get [as value] (ngx-materialize.js:850) at MzChipInputComponent.push../node_modules/ngx-materialize/fesm5/ngx-materialize.js.MzChipInputComponent.writeValue (ngx-materialize.js:958) at forms.js:1706 at forms.js:2762 at Array.forEach (<anonymous>) at FormControl.push../node_modules/@angular/forms/fesm5/forms.js.FormControl.setValue (forms.js:2762) at forms.js:4115 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388) at Object.onInvoke (core.js:3824) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387) at MzChipInputComponent.get [as value] (ngx-materialize.js:850) at MzChipInputComponent.push../node_modules/ngx-materialize/fesm5/ngx-materialize.js.MzChipInputComponent.writeValue (ngx-materialize.js:958) at forms.js:1706 at forms.js:2762 at Array.forEach (<anonymous>) at FormControl.push../node_modules/@angular/forms/fesm5/forms.js.FormControl.setValue (forms.js:2762) at forms.js:4115 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388) at Object.onInvoke (core.js:3824) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387) at resolvePromise (zone.js:814) at zone.js:877 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:3815) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188) at drainMicroTaskQueue (zone.js:595)

Uncaught TypeError: this.chipInputElement.material_chip is not a function at MzChipInputComponent.get [as value] (ngx-materialize.js:850) at ngx-materialize.js:901 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188) at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:496) at ZoneTask.invoke (zone.js:485) at timer (zone.js:2054)

Steps to Reproduce (for bugs)

I just reproduced the code example provided on https://sherweb.github.io/ngx-materialize/chip.

<mz-chip-input [placeholder]="'Enter a tag'" [secondaryPlaceholder]="'+Tag'" [(ngModel)]="chips"> </mz-chip-input>

That is scripts session on angular.json file:
"scripts": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/materialize-css/dist/js/materialize.min.js" ]

Your Environment

• Version used: ^6.0.1
• Angular version used: ^6.1.0
• Browser Name and version: Google Chrome Version 68.0.3440.106
• Operating System and version (desktop or mobile): Windows 10

[scote]

Can you share your package.json?

[raffclar]

I was experiencing the same problem and came across this issue through Google last week.

I was able to resolve it by removing materialize-css from my package.json dependencies which was pinned at 1.0.0 I then deleted my package-lock.json and relied on ngx-materialize to pull materialize-css as a dependency. The version of materialize-css in my new package-lock.json is now 0.100.4.