Skip to content
Angular wrap around Materialize library
TypeScript HTML Other
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci Update Angular 6 (#328) Jun 3, 2018
.github/ISSUE_TEMPLATE Update issue templates (#335) Aug 6, 2018
.vscode Update Angular 6 (#328) Jun 3, 2018
demo Adjusting the name of card-image-title component in demo app (#368) Dec 5, 2018
lib Remove unused imports (#357) Oct 17, 2018
.editorconfig Update Angular 6 (#328) Jun 3, 2018
.gitignore Update Angular 6 (#328) Jun 3, 2018
.npmignore
CODE_OF_CONDUCT.md Update Angular 6 (#328) Jun 3, 2018
CONTRIBUTING.md Update Angular 6 (#328) Jun 3, 2018
LICENSE Add Apache 2.0 license (#17) Jan 30, 2017
README.md 6.0.1 Jun 4, 2018
angular.json Update Angular 6 (#328) Jun 3, 2018
app.json Update Angular 6 (#328) Jun 3, 2018
appveyor.yml Update Angular 6 (#328) Jun 3, 2018
package.json 6.1.2 Aug 12, 2018
static.json Update Angular 6 (#328) Jun 3, 2018
tsconfig.json
tslint.json Update Angular 6 (#328) Jun 3, 2018
typings.json Update Angular 6 (#328) Jun 3, 2018
yarn.lock Update Angular 6 (#328) Jun 3, 2018

README.md

ngx-materialize

CircleCI Status AppVeyor Status NPM Version License

This library is an Angular wrap around Materialize library, a responsive CSS/JS framework that implements Material Design specifications from Google.

Demo and documentation : https://sherweb.github.io/ngx-materialize/

Why ngx-materialize?

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 MediaService that allow customization according to view port size
  • Add support for ReactiveForm with validation

Table of contents

Installation

The following commands will add ngx-materialize library to your package.json file along with its dependencies: Materialize CSS and jQuery.

npm install --save ngx-materialize

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

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

angular.json

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

tsconfig

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

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

Icons

Ngx-materialize offers two "out-of-the-box" options for icons although you are free to use the library of your choice.

Material Design Icons

To use Material Design Icons (community project based on Google Material Icons with lots of added icons), which is used with mz-icon-mdi directive, you will need to add the library with the following command:

npm install --save @mdi/font

Don't forget to include Mdi library to your application.

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

angular.json

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

Material Icons

To use Material Icons (official Google Material Icons library), which is used with mz-icon directive, you will need to add the following into the <head> tag of your index.html file:

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

Animation

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 { NoopAnimationsModule } from '@angular/platform-browser/animations';

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

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

Usage

You must import component module you want to use inside your module to be able to use Materialize components.

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

MaterializeModule deprecated

We will continue to maintain this module for a period of time to allow you to migrate your existing components to the new way. We recommend to use the new component modules when you are building new component/application.

If you still want to import only one module, you can create a separate NgModule in your application that imports all the ngx-materialize components. You will be able to include this module anywhere you like to use the components.

import { MzInputModule, MzValidationModule } from 'ngx-materialize';

@NgModule({
  imports: [
    MzInputModule,
    MzValidationModule,
  ],
  exports: [
    MzInputModule,
    MzValidationModule,
  ],
})
export class CustomMaterializeModule { }

Available features

Page listed in Native CCS Class will not be wrapped.

Components

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

Services

  • Media

Demo application

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

Road map

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.

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!

Credits

Thanks to Ali Mohammadi for donating the npm package name.

You can’t perform that action at this time.