materializecss + Angular 6 如何配置？

Question

I am new to Angular in general and I am trying to use materializecss with Angular 6. I am using CLI to create my components.

I have read materials about how to do it in Angular 2, but Angular 6 seems to be different, for instance not having angular-cli.json file.

How can I get materializecss running in Angular 6?

Command used to install materializecss: npm i materialize-css@next

angular.json attempted modification:

           "styles": [
              "./node_modules/materialize-css/dist/css/materialize.css",
              "src/styles.scss"
            ],
            "scripts": [
              "./node_modules/jquery/dist/jquery.min.js",
              "./node_modules/materialize-css/dist/js/materialize.js"
            ]

This alone did not work.

Answer 1

Have you tried ngx-materialize ?

their instructions suggests that you also need to alter the tsconfig.json file and add the following to the types array:

• "jquery",
• "materialize-css"

unless you are looking for a specific component I would suggest angular-material as a better alternative.

Answer 2

There are a few ways of using materialize styles in Angular.
To list some:

1. Download angular specific css frameworks-see npm for angular compatible css frameworks.
2. Download the source code from the materialize-css website and paste it into any of the components css file.
3. Download the npm package of materialize by typing npm install materialize-css@next into the terminal.

Note:

Some features of materialize-css require jquery. I'm currently having issues in Angular when I nmp install jquery...
materialize-css styling and colors can however still be used in components which don't require animations.

A word on Angular specific packages:

ngx-materialize is great for easy installation,component styling and animations but has deprecated dependencies.

materialize-angular is also good, but is currently not backed by any organisations and therefore too has many out-of-date dependencies.

If you don't know exactly why you might need an angular specific css framework, consider using the vanilla Materialize or Bootstrap frameworks.