I would like to use materializecss without jQuery. For example, I want to do the following without the use of jQuery:

$('.chips-initial').material_chip({
    data: [{
      tag: 'Apple',
    }, {
      tag: 'Microsoft',
    }, {
      tag: 'Google',
    }],
  });

Thanks

I would like to use materializecss without jQuery. For example, I want to do the following without the use of jQuery:

$('.chips-initial').material_chip({
    data: [{
      tag: 'Apple',
    }, {
      tag: 'Microsoft',
    }, {
      tag: 'Google',
    }],
  });

Thanks

• javascript
• jquery
• materialize

• 1 materializecss.com/getting-started.html One last thing to note is that you have to import jQuery before importing materialize.js! – Gardelin Commented Feb 20, 2017 at 20:03
• @tuna Which is a shame, since jQuery use seems to be slowing down nowadays. Every framework out there that relies on it has opened issues asking this very thing. – mkvlrn Commented Apr 21, 2017 at 19:55

3 Answers 3

Starting with Materialize 1.0.0, jQuery is not a dependency anymore.

See https://medium.com/@materializecss/materialize-to-1-0-and-beyond-e0233b8ac15

Previous releases still rely on jQuery. Alternatively you can use Cash by Ken Wheeler.

Since version 1.0.0 you can.

const elem = document.querySelector('.chips');
const instance = M.Chips.init(elem, options);

List of possible options for the chips.

For Angular2+ you'll need:

npm install materialize-css

In package.json

"dependencies": {
    "materialize-css": "^1.0.0-alpha.4",
}

or later version.

In .angular-cli.json

  "styles": [
    "../node_modules/materialize-css/dist/css/materialize.css"
  ],
  "scripts": [
    "../node_modules/materialize-css/dist/js/materialize.js"
  ],

And to be able to use M object in your components, simply add to the imports

declare const M: any;

Yes, it is possible. Add this to the head section of each HTML document.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

Then you can add classes to tags to add styles. There are lots of useful tutorials that can be found on google search. My favorite one is right here:

https://www.youtube.com/watch?v=gCZ3y6mQpW0&list=PL4cUxeGkcC9gGrbtvASEZSlFEYBnPkmff&ab_channel=TheNetNinja