Ng2-bwired-materialize NPM

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

Installation

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 :

.angular-cli.json

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

tsconfig

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

Usage

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