ng2-materialize

We are aware that alternatives exposing Material Design components already exist. But, in our case, we want to rely on a stable css framework that does not depend on a specific js framework.

We already know the possibilities Materialize offers. What is left to do is to wrap components that we want to use in Angular component.

If you want to use a component that is not yet implemented, simply wrap the existing Materialize components that already meets the Material Design specifications. No need to be an HTML/CSS expert, only to know the Angular 2+ components. Or if you are in a hurry, you can use it directly in HTML rather than in Angular component.

The following commands will add Ng2-Materialize library to your package.json file along with it dependencies: Materialize CSS, jQuery and Mdi (Mdi icons library is optional as your are free to use the icon library of your choice).

npm install --save ng2-materialize
npm install --save mdi    #optional

Don't forget to include jQuery, Materialize, and Mdi in your application.

If you are using Angular-CLI you can follow the example below :

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

{
  "compilerOptions": {
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "es2016",
      "dom"
    ],
    "outDir": "../out-tsc/app",
    "target": "es5",
    "module": "es2015",
    "baseUrl": "",
    "types": [
+      "jquery",
+      "materialize-css"
    ]
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

See also Angular CLI 3rd Party Library Installation and Using MaterializeCSS with your Angular 2 Angular CLI App.

Some components are using advance animation transition. You need to install @angular/animations and include BrowserAnimationsModule if you want those animation to work.

npm install --save @angular/animations

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 { }

If you don't want to install a new dependency in your application, you can include NoopAnimationsModule.

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

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

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

You must import MaterializeModule inside your module to be able to use Materialize components.

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
+ import { MaterializeModule } from 'ng2-materialize';

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

@NgModule({
  imports: [
    CommonModule,
+    MaterializeModule.forRoot(),
  ],
  declarations: [ HomeComponent ],
})
export class HomeModule { }

Page listed in Native CCS Class will not be wrapped.

• Badge
• Button
• Card
• Checkbox
• Collapsible
• Collection
• Datepicker
• Dropdown
• Form validation
• Icon
• Input
• Modal
• Navbar
• Parallax
• Progress
• Radio-Button
• Select
• Sidenav
• Spinner
• Switch
• Tab
• Textarea
• Timepicker
• Toast
• Tooltip

• Media

A demo application is available at https://sherweb.github.io/ng2-materialize/, or refer to the ./demo-app folder and its README.

We (at SherWeb) are currently wrapping the components as we need them, and unfortunately, we cannot provide a specific road map.

If some components are missing, feel free to contribute.

Contributions are always welcome.

Make sure that :

• Your code style matches with the rest of the project
• Unit tests pass
• Linter passes

And you are ready to go!

Thanks to Ali Mohammadi for donating the npm package name.