After struggling, crying (a little), and spending hours debugging, I finally managed to integrate Materialize-CSS into my Angular project. 😅

Along the way, I encountered several unexpected bugs and compatibility issues that nearly made me give up.

If you've ever tried to use Materialize-CSS in Angular and couldn't get it to work — or you're just starting out and want to avoid the pain — this post is for you! 🚀

I'll walk you through how to integrate Materialize-CSS into your Angular project in a simple and effective way, without the usual frustration.

Spoiler: It's not just “install and import.” There are a few key tricks that make all the difference.

Let'get into it.

Step-by-step: How to Integrate Materialize-CSS in Angular

first step:

  1. Installing dependecies. First, make sure you have jQuery and its type definitions installed. Then, install Materialize-CSS and its types as well. 
# jQuery
npm install jquery

# jQuery types
npm install --save-dev @types/jquery

# Materialize-CSS
npm install materialize-css

# Materialize-CSS types
npm install --save-dev @types/materialize-css
  1. Configuring angular.json You need to include both jQuery and Materialize-CSS in your angular.json file. 
"scripts": [
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/materialize-css/dist/js/materialize.min.js"
],
"styles": [
  "node_modules/materialize-css/dist/css/materialize.min.css"
]
  1. Importing the dependencies You can import the libraries where you'll use them — either in a global module or in a specific component: 
import * as $ from 'jquery';
import * as M from 'materialize-css';

for instance:

Image description

  1. Initializing Materialize Components Many Materialize components require initialization via JavaScript. Do this inside the ngOnInit() lifecycle hook:

Image description

This ensures everything is ready when your component is loaded.

  1. Styling your Template Now you can freely use Materialize's CSS classes in your templates. Here's a simple example:

Image description

  1. Using JS-Dependent Components For components that depend on JavaScript (like modals, tooltips, dropdowns, etc.), you'll need to initialize them individually:
  • In your component.ts:

Image description

  • In your tempate (html code)

Image description

Thanks so much for reading! I hope this guide saves you time (and sanity 😅).

If you want to check out the working code, it's available on GitHub:
👉 Repo Link

✍️ Written by: Nelson Manuel Garcia
Feel free to reach out if you have questions or want to connect! 🎧💻