next.materialize initialization without jQuery

user_6435054 0
Viewed 493

Today I visited the 1.0 alpha version of materializecss, Im working with Angular and Im using some of the components that need jQuery initialization like Side Nav

The Doc says that is possible to initializate them with:

  var elem = document.querySelector('.sidenav');
  var instance = new M.Sidenav(elem, options);

Instead of the jQuery way that Im using at the moment:

  $(document).ready(function(){
    $('.sidenav').sidenav();
  });

How can I make It possible? What is M? Maybe I need an example of this new way...

materialize angular
1 Answers

First of all, you need to add the CSS and JS imports either at the top of the index.html file or at the angular-cli.json file

After that you need to declare a global variable

declare var M: any;

And then you can use it...

In more detail:

angular-cli.json

"styles": [
  "../node_modules/PATH/TO/MATERIALIZE.css"
],
"scripts": [
  "../node_modules/PATH/TO/MATERIALIZE.js"
],

Inside a Component

// Imports
import { ... } from '...';

// Here you declare the M
declare var M: any;

// Then you have the component
@Component({...})
export class ExampleComponent implements onInit { ... }
user_87789110
Related