10

I really want to use materializecss in Angular2.

I followed the steps from

https://www.npmjs.com/package/angular2-materialize.

I'm still studying Angular2 and using angular-cli. But I don't know where to add the plugin bec.

I don't know where webpack is. And I tried to follow this steps too https://medium.com/@ladyleet/using-materializecss-with-your-angular-2-angular-cli-app-2eb64b05a1d2#.cpgjvvo7m

but I don't know where angular-cli-build.js is?

oh, btw I am using angular-cli. I hope there's someone who can help me.

I really like materializecss. I'm always using it when I'm using AngularJS.

Thanks.

Sunil Garg
  • 14,608
  • 25
  • 132
  • 189
LordGrim
  • 731
  • 2
  • 11
  • 22

4 Answers4

6

Answer from this repo : https://github.com/stanleyeosakul/angular-travelville

Setup Materialize CSS

  1. Run yarn add materialize-css@next ( or npm i materialize-css@next)

  2. Add Materialize CSS into .angular-cli.json ( or angular.json)

    json // .angular-cli.json { "apps": [ { ... "styles": [ "../node_modules/materialize-css/dist/css/materialize.min.css", "styles.css" ], "scripts": [ "../node_modules/materialize-css/dist/js/materialize.min.js" ], ... } ] }

  3. Declare the M variable in ./src/typings.d.ts (or create the file yourself)

    typescript declare var M;

  4. Materialize CSS is now integrated into Angular!

lokeshrmitra
  • 486
  • 6
  • 8
4

You can import materialize css in your main styles.sass file like this.

// override fonts path to prevent build errors (or use resolve-url loader)
$roboto-font-path: "../node_modules/materialize-css/fonts/roboto/"

// optionally override color variables eg: ...
$primary-color: color("materialize-purple");

@import "~materialize-css/sass/materialize"
tomastrajan
  • 1,728
  • 14
  • 28
2

Even i tried materialize css with angular-cli project,followed the instructions from MaterializeCss, And it's working. The steps which i followed is:

Install jquery, materialize-css and angular2-materialize

Add jquery and materialize in angular-cli scripts

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

Add materialize.css in angular-cli

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

And finally import MaterializeModule in app.module.ts

 import { MaterializeModule } from 'angular2-materialize';
 @NgModule({
  imports: [
   MaterializeModule
  ]
 })
Babysunandha Chettiyannan
  • 21
  • 1
2

Use this npm package and instruction:
Installing & configuring angular2-materialize in projects created with the Angular CLI
https://github.com/InfomediaLtd/angular2-materialize

Alexander Gorban
  • 31
  • 4