There are many ways to use MaterializeCSS framework.
Few things to keep in mind before going to installation
You can use any of the following methods:
Each has its own advantages and disadvantages.
Just add this to index.html
and you are good to go .
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
<!-- We need jquery first -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
Add it as an asset in your project. This helps in not depending on internet when building and running locally.
Extract them
Copy materialize.min.css
, jquery-3.2.1.min.js
and materialize.min.js
in your assets folder
add them to index.html
<link rel="stylesheet" href="./assets/materialize.min.css" >
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="./assets/materialize.min.js"></script>
In this method we directly include the files to our angular build. I am assuming the angular project is built with @angular/cli
for simplicity.
Do
npm install materialize-css --save
npm install jquery --save
This is same as downloading CSS files, but we dont need to add them in our repository.
Add the following to .angular-cli.json
:
"styles": [
"../node_modules/materialize-css/dist/css/materialize.css",
"styles.scss"
]
...
"scripts":[
"../node_modules/jquery/dist/jquery.js",
"../node_modules/materialize-css/dist/js/materialize.js"
]
Download source with SCSS version
Do this if you want to take advantage of SCSS
to change default behavior of the library. Otherwise you can still use previous method and use SCSS along side.
Add them to a folder outside src
. May be create a folder materialize-src
as sibling to src
and paste the contents there. We are doing this because npm install of materialize-css doesn't give us scss version. (Correct me if I am wrong )
Install jquery
npm install jquery --save
Add them to your .angular-cli.json
"styles": [
"../materialize-src/sass/materialize.scss",
"styles.scss"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../materialize-src/js/bin/materialize.min.js"
],
The above all installation methods provide full functionality with materialize and no need to further install anything to work in angular. Take any example and just use the appropriate HTML structure inside the component part of angular and you are good to go.
In some instances you might need to tinker with javascript and for that we need to use jQuery. Instead of that we can use the angular wrapper developer at angular2-materialize. I developed a full functional site using angular and materialize and never felt a need for that.
If you still believe you need it . You can install as follows :
Install materialize with any of the above mentioned ways
Install angular2-materialize
npm install angular2-materilize --save
Add in angular app.module.ts
import { MaterializeModule } from "angular2-materialize";
@NgModule({
imports: [
//...
MaterializeModule,
],
//...
})