How To Install Materialize CSS In Angular

Materialize CSS has been a great tool for quick and elegant front-end development. I originally wrote this post to show you how to install the vanilla Materialize CSS in Angular (still here in the second section ) however, I discovered the open source project: ngx-materalize and I highly recommend using this package if you are using Materialize CSS with Angular. It may not be as quick to get started, but in the long run you will end up saving a bunch of time and frustration using it’s built-in features. It makes development much cleaner and easier than the vanilla version. Here’s how you can install it.

Once you’ve created your project, open up your terminal and run:
```
 npm install --save ngx-materialize
```
This installs Materailize CSS, jQuery and the added features of ngx-materalize.

Open up your angular.json file and add the style and scripts.

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

Add jQuery and materalize-css types to your .tsconfig file:

     {
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/app",
     "module": "es2015",
     "types": [
       "jquery", // Add
       "materialize-css" // Add
     ]
   },
   "exclude": [
     "src/test.ts",
     "**/*.spec.ts"
   ]
 }

Install the icons if you choose by running this in your terminal:
```
 npm install --save @mdi/font
```

Add the icons to your angular.json file:

 "styles": [
   "src/styles.scss",
   "node_modules/materialize-css/dist/css/materialize.min.css",
   "node_modules/@mdi/font/css/materialdesignicons.min.css" // Add
 ],

Lastly, you’ll probably want to install Animations, so run this in your terminal:

 npm install --save @angular/animations

You use animations by adding them to every module you want them to be used. If you want them to be used throughout your entire app then you could add them to your app.module.ts file like this:

 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 // Add line below
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

 @NgModule({
   declarations: [
     AppComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     // Add line below:
      BrowserAnimationsModule,
   ],
   providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

Now you should be on your way to using Materialize CSS with Angular using ngx-materalize. Don’t forget to restart your server!

If you would like to install the vanilla version of MaterializeCSS:

Once you’ve created your project, open up your terminal and run:
```
  npm i materialize-css jquery --S
```
This installs Materailize CSS and jQuery
If you want to use the Material Design icons add this to the your index.html file:
```
 <head>
   ...
   ...
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
```
You can host the icons yourself but I prefer a CDN as it’s likely people have it downloaded to their browser’s cache and any new fonts are automatically updated/added, but you may want to host them yourself if you are building an app that needs to work offline (e.g. a Progressive Web App (PWA)). If that’s the case you can go to the Material Design site for directions on how to do that.

Open up your angular.json file and add the style and scripts.

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

Restart your server and you should be ready to go!

Colin Stodd