materialize: Button waves do not disappear after click

You’ll get this behavior if you’ve included the materialize javascript more than once on the page.

You’ll get this behavior if you’ve included the materialize javascript more than once on the page.

If you’re on angular and you can’t use ngx-materialize (because it hasn’t been updated to be compatible with materialize-css 1.0), and you need to M.Init() some components, remove materialize.min.js from your scripts in the angular.json file and import * as M and then add M as a provided value in a ‘shared’ module that you can import across your app. You then @Inject() it into whatever component you need so that you can M.AutoInit() during your lifecycle hooks. Doing this will prevent materialize from being imported several times. Here’s a sample shared.module.ts file:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import * as M from 'materialize-css/dist/js/materialize';

@NgModule({
	imports: [
		CommonModule
	],
	declarations: [],
	providers:[
		{provide:'M', useValue:M}
	],
  	exports: [
		  CommonModule
	]
})
export class SharedModule { }

your component would look something like this (I’m using a materialize modal dialog box component):

import { Component, OnInit, OnDestroy, ViewChild, AfterViewInit, Inject } from '@angular/core';
import * as M from 'materialize-css/dist/js/materialize';

@Component({
    selector: 'dialog-box',
    templateUrl: './dialog-box.component.html',
    styleUrls: ['./dialog-box.component.scss']
})
export class DialogBoxComponent implements OnInit, AfterViewInit, OnDestroy {
    @ViewChild('dialogBox') elementRef: any;
    materializeBinding: any;

    constructor(@Inject('M') private M: any) {}

    ngOnInit() {}

    open() {
        this.materializeBinding.open();
    }

    ngAfterViewInit() {
	this.materializeBinding = M.Modal.init(this.elementRef.nativeElement);
    }

    // ...other code omitted for brevity
}

so it looks that this Issue is related with a duplicate event listener, Materialize shouldn’t duplicate it.