How to use MaterializeCSS in Angular 2

Question

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.

lokeshrmitra · Accepted Answer · 2018-06-02 19:49:00Z

7

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

Setup Materialize CSS

Run yarn add materialize-css@next ( or npm i materialize-css@next)
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" ], ... } ] }
Declare the M variable in ./src/typings.d.ts (or create the file yourself)

typescript declare var M;
Materialize CSS is now integrated into Angular!

answered Jun 2, 2018 at 19:49

lokeshrmitra

4966 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

KRIPA SHANKAR JHA Over a year ago

Just a little change: instead of ../node_modules use ./node_modules

tomastrajan · Accepted Answer · 2017-04-17 20:40:54Z

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"

answered Apr 17, 2017 at 20:40

tomastrajan

1,72614 silver badges28 bronze badges

Comments

Babysunandha Chettiyannan · Accepted Answer · 2017-01-30 14:14:32Z

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
  ]
 })

answered Jan 30, 2017 at 14:14

Babysunandha Chettiyannan

211 bronze badge

1 Comment

LordGrim Over a year ago

I would like to ask if all the features of materializecss are working? Thanks btw.

Alexander Gorban · Accepted Answer · 2017-06-02 18:51:20Z

2

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

answered Jun 2, 2017 at 18:51

Alexander Gorban

314 bronze badges

Collectives™ on Stack Overflow

How to use MaterializeCSS in Angular 2

4 Answers 4

Setup Materialize CSS

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Setup Materialize CSS

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related