This repository was archived by the owner on Nov 6, 2024. It is now read-only.

sherweb/ngx-materializePublic archive

NotificationsYou must be signed in to change notification settings
Fork74
Star313

Angular wrap around Materialize library

sherweb.github.io/ngx-materialize/

License

Apache-2.0 license

313 stars 74 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 250 Commits
.circleci		.circleci
.github/ISSUE_TEMPLATE		.github/ISSUE_TEMPLATE
.vscode		.vscode
demo		demo
lib		lib
.editorconfig		.editorconfig
.gitignore		.gitignore
.npmignore		.npmignore
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
angular.json		angular.json
app.json		app.json
appveyor.yml		appveyor.yml
package.json		package.json
static.json		static.json
tsconfig.json		tsconfig.json
tslint.json		tslint.json
typings.json		typings.json
yarn.lock		yarn.lock

Repository files navigation

Caution

This repoitory is unmaintained andshould not be used in production

ngx-materialize

This library is anAngular wrap aroundMaterialize 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

Installation

The following commands will add ngx-materialize library to yourpackage.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 usingAngular-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"  ]}

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 useMaterial Design Icons (community project based on Google Material Icons with lots of added icons), which is used withmz-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 usingAngular-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 useMaterial Icons (official Google Material Icons library), which is used withmz-icon directive, you will need to add the following into the<head> tag of yourindex.html file:

<linkhref="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 includeBrowserAnimationsModule 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 includeNoopAnimationsModule.

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 separateNgModule in your application that imports all thengx-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 { }