## Why ng2-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 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](https://github.com/angular/angular-cli) you can follow the example below :
#### .angular-cli.json
```diff
"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"
],
```
#### tsconfig
```diff
{
"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](https://github.com/angular/angular-cli/wiki/overview#global-library-installation) and [Using MaterializeCSS with your Angular 2 Angular CLI App](https://medium.com/@ladyleet/using-materializecss-with-your-angular-2-angular-cli-app-2eb64b05a1d2#.8p3uba85g).
## 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
```
```diff
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`.
```diff
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.
```diff
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
+ import { MzButtonModule, MzInputModule } from 'ng2-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 `ng2-materialize` components. You will be able to include this module anywhere you like to use the components.
```
import { MzInputModule, MzValidationModule } from 'ng2-materialize';
@NgModule({
imports: [
MzInputModule,
MzValidationModule,
],
exports: [
MzInputModule,
MzValidationModule,
],
})
export class CustomMaterializeModule { }
```
## Available features
Page listed in [Native CCS Class](./native-css-class) will not be wrapped.
### Components
* 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
### Services
* Media
## Demo application
A demo application is available at [https://sherweb.github.io/ng2-materialize/](https://sherweb.github.io/ng2-materialize/), or refer to the `./demo-app` folder and its [README](./demo-app/README.md).
## 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](https://github.com/ayalma) for donating the npm package name.
