How to use/install Materialize Css with angular 2+

How to use/install Materialize Css with angular 2+


Published at - Aug 13, 2021

To use Materialize CSS with angular we need to use the ngx-materialize library which provides all required things to use materialize CSS with angular.

Demo Link – https://sherweb.github.io/ngx-materialize/home

Why wee need to use ngx-materialize ?

Here are some points provided by its offical documentation

The main purpose of this library is to simplify the usage of Materialize within the Angular framework which make it more dynamic. To illustrate this, we have Playground sections in several component demo pages.

In other words, we …

  • Simplify components usage
  • Initialize components automatically
  • Handle Angular “quirks” with Materialize library
  • Offer component injection when possible
  • Provide a media service that allows customization according to viewport size
  • Add support for ReactiveForm with validation

Installation: In an existing project

Step 1 : Install libraries

npm install --save ngx-materialize @mdi/font @angular/animations

Step 2 : Edit angular.json and add the following lines under the styles and scripts array

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

Step 3 : Edit tsconfig.app.json add the following lines under types array

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

Stpe 4 : Add marerial icons

Add following line in the <head></head> section of your src/index.html

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Step 5 : Animations

Add the following code in your src/app/app.module.ts

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
+ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppModule } from './app.module';

@NgModule({
  imports: [
+    BrowserAnimationsModule,
  ],
})
export class AppModule { }

Step 6 : Verify

Now we need to verify that following code is working bu adding a button in our app.component.html. In order to do that we need to add dependencies in our app.module.ts file

app.module.ts

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
+ import { MzButtonModule, MzInputModule } from 'ngx-materialize';

import { HomeComponent } from './home.component';

@NgModule({
  imports: [
    CommonModule,
+   MzButtonModule,
+   MzInputModule,
  ],
  declarations: [ HomeComponent ],
})
export class HomeModule { }

app.component.html

<button mz-button>
  button
</button>

Now serve your application with ng serve -o and it will show a button like following image –

Done !!!!

Please comment in case of any problem…





About author

Harendra
Harendra Kanojiya

Hello, I am Harendra Kumar Kanojiya - Owner of this website and a Fullstack web developer. I have expertise in full-stack web development using Angular, PHP, Node JS, Python, Laravel, Codeigniter and, Other web technologies. I also love to write blogs on the latest web technology to keep me and others updated. Thank you for reading the articles.



Follow Us

Follow us on facebook Click Here

Facebook QR
Scan from mobile
Join our telegram channel Click Here
Telegram QR
Scan from mobile