CODEWITHSUNDEEP
angularmaterializeangular2-material
Albert
Albert

Reputation: 94

Angular 2 materialize css

I use Angular 2 with Webpack module bundler, i followed this tutorial to add Materialize css into my project. Then i get stuck at this error message: Uncaught Error: Couldn't find Materialize object on window. It is created by the materialize-css library. Please import materialize-css before importing angular2-materialize.

Does anyone experience this before? Any help will be much welcomed.

Upvotes: 2

Views: 1646

Answers (1)

Daniel Corner
Daniel Corner

Reputation: 31

To integrate Materialize CSS with Angular 6:

  1. Install all dependencies:

    npm install jquery hammerjs materialize-css@next angular2-materialize --save

  2. Add the js files for these dependencies inside the apps section and then inside scripts subsection in file angular.json:

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

  3. Import materialize-css and MaterializeModule in the main app.module:

    ...
import 'materialize-css';
import { MaterializeModule } from 'angular2-materialize';
...
@NgModule({
imports: [
...
MaterializeModule,
],
})
  4. Restart your server

sources:

https://fullstackengine.net/create-wedding-page-angular-materialize/

http://colinstodd.com/blog/post/how-to-install-materialize-css-in-angular-5

Angular 5 with materialize css

Upvotes: 3

Related Questions