Material Design Lite with Angular4 - Incompatibility

0
votes

I'm making a website with Angular 4 and I use bootstrap and material design lite (mdl). I have some problems with mdl. For example, if I charge a new angular(s component with a route, some components of mdl will not work.

I already researched in stackoverflow and I find I have to use this functions to reload mdl's components : window.componentHandler.upgradeAllRegistered(); And it's working when I used that in the console of the browser !

But I'm new in Angular (I started last week), and I don't know how can I charge this function when I load a new angular's component. Can you help me ?

Thank you

1
angularmaterial-design-lite

1 Answers

0
votes

You are in the right track. Did you check this?

There is a section dedicated in how (and where) to upgrade MDL components:

import {Directive, AfterViewChecked} from '@angular/core';

declare var componentHandler: any;

@Directive({
    selector: '[mdl]'
})
export class MDL implements AfterViewChecked {

    ngAfterViewChecked() {
        if (componentHandler) {
            componentHandler.upgradeAllRegistered();
        }
    }
}