How To Install Materialize CSS In Angular

How To Install Materialize CSS In Angular

code
Colin Stodd
Angular,Materialize CSS,Tutorial
11 Oct 2018 (Published)
28 Mar 2020 (Updated)

I’ve recently been playing with Materialize CSS, and I’ve been loving it. 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 makes development much cleaner and easier than the vanilla version. Here’s how you can install it.

  1. 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.

  2. 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.js"
     ]
    
  3. 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"
       ]
     }
    
  4. Install the icons if you choose by running this in your terminal:

     npm install --save @mdi/font
    
  5. 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
     ],
    
  6. 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, go this route:

  1. Once you’ve created your project, open up your terminal and run:

      npm i materialize-css jquery --S
    

    This installs Materailize CSS and jQuery

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

     "styles": [
       "./node_modules/materialize-css/dist/css/materialize.css",
       "src/styles.css"
     ],
       "scripts": [
       "./node_modules/jquery/dist/jquery.min.js",
       "./node_modules/materialize-css/dist/js/materialize.js"
     ]
    
  3. Restart your server and you should be ready to go!