31/3/2018 angular2-materialize - npm

npm Enterprise Features Pricing Docs Support

log in or sign up

Search packages

Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

angular2-materialize
public

Readme

0 Dependencies

5 Dependents

76 Versions

Angular2 Materialize
build passing npm v15.1.10 downloads 15k/month license MIT 📦🚀 semantic-release commitizen friendly

prs welcome

Angular 2 support for Materialize CSS framework http://materializecss.com/

This library adds support for the Materialize CSS framework in Angular 2. It is needed to add the dynamic behavior of
Materialize CSS that is using JavaScript rather than plain CSS.

View demo here: https://infomedialtd.github.io/angular2-materialize/

https://www.npmjs.com/package/angular2-materialize 1/8
31/3/2018 angular2-materialize - npm

To use the library you need to import it once per project and then use its MaterializeDirective directive for binding it to
any component that needs a dynamic behavior, like collapsible panels, tooltips, etc.

Using angular2-materialize
Start by following the Angular CLI or webpack instructions below to add the required dependencies to your project.

Add the MaterializeModule to your NgModule:

import { MaterializeModule } from "angular2-materialize";

@NgModule({
imports: [
//...
MaterializeModule,
],
//...
})

In your component, use it for dynamic behavior. For example, for collapsible panels:

@Component({
selector: "my-component",
template: `
<ul materialize="collapsible" class="collapsible" data-collapsible="accordion">
<li>
<div class="collapsible-header"><i class="material-icons">filter_drama</i>First</di
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">place</i>Second</div>
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
</li>
</ul>

Apply an empty MaterializeDirective attribute directive for top level components, like forms:

<form materialize class="col s12">

<div class="row">
<div class="input-field col s6">
<input placeholder="Placeholder" id="first_name" type="text" class="validate">
<label for="first_name">First Name</label>

https://www.npmjs.com/package/angular2-materialize 2/8
31/3/2018 angular2-materialize - npm

</div>
</div>
</form>

The MaterializeDirective attribute directive (materialize) accepts any MaterializeCSS initialization call to apply to the
element. The list of supported functions are provided by MaterializeCSS. Examples: collapsible, modal, tooltip,
dropdown, tabs, material_select, sideNav, etc.

For example, to apply tooltip:

<a materialize="tooltip" class="btn tooltipped" data-position="bottom" data-delay="50" data-too

The Materialize attribute directive also allows specifying parameters to be passed to the function, but providing a
materializeParams attribute returning an array of params. Use it with a function call or even by inlining the params in
the HTML.

Another useful option is emitting actions on an element. You may want to do that for calling Materialize functions, like
closing a modal dialog or triggering a toast. You can do that by setting the materializeActions attribute, which accepts
an EventEmitter. The emitted events can either be a "string" type action (Materialize function call) or a structure with
action and parameters:

The example below shows how you'd create a modal dialog and use the actions to open or close it.

<!-- Modal Trigger -->

<a class="waves-effect waves-light btn modal-trigger" (click)="openModal()">Modal</a>

<!-- Modal Structure -->

<div id="modal1" class="modal bottom-sheet" materialize="modal" [materializeParams]="[{dismissi
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
<a class="waves-effect waves-green btn-flat" (click)="closeModal()">Close</a>
<a class="modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
</div>
</div>

import {MaterializeAction} from 'angular2-materialize';

//...
modalActions = new EventEmitter<string|MaterializeAction>();
openModal() {
this.modalActions.emit({action:"modal",params:['open']});
}
closeModal() {
this.modalActions.emit({action:"modal",params:['close']});
}

https://www.npmjs.com/package/angular2-materialize 3/8
31/3/2018 angular2-materialize - npm

For dynamic select elements apply the materializeSelectOptions directive to trigger element updates when the
options list changes:

<select materialize="material_select" [materializeSelectOptions]="selectOptions">

<option *ngFor="let option of selectOptions" [value]="option.value">{{option.name}}</option>
</select>

Installing & configuring angular2-materialize in projects created with the

Angular CLI
Install MaterializeCSS and angular2-materialize from npm

npm install materialize-css --save

npm install angular2-materialize --save

jQuery 2.2 and Hammer.JS are required

npm install jquery@^2.2.4 --save

npm install hammerjs --save

Edit the angular-cli.json :

Go to section apps and find styles array inside it (with only styles.css value by default), add the following line
inside array before any styles:

"../node_modules/materialize-css/dist/css/materialize.css"

Go to section apps and find scripts array inside it, and add the following lines inside array

"../node_modules/jquery/dist/jquery.js",
"../node_modules/hammerjs/hammer.js",
"../node_modules/materialize-css/dist/js/materialize.js"

Add to the top of app.module.ts

import { MaterializeModule } from 'angular2-materialize';

Add MaterializeModule inside imports array of @NgModule decorator in app.module.ts

Add this line to header of index.html

https://www.npmjs.com/package/angular2-materialize 4/8
31/3/2018 angular2-materialize - npm

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

Installing and configuring angular2-materialize with webpack

Install MaterializeCSS and angular2-materialize from npm

npm install materialize-css --save

npm install angular2-materialize --save

MaterializeCSS required jQuery and HammerJS. Check the exact version materialize-css is compatible with:

npm install jquery@^2.2.4 --save

npm install hammerjs --save

Add the Google MD fonts to your index.html:

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

Import materialize-css styles:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/mate

Add the following plugin to your webpack configuration to provide jQuery:

const ProvidePlugin = require('webpack/lib/ProvidePlugin');

module.exports = {
//...
plugins: [
new ProvidePlugin({
"window.jQuery": "jquery",
Hammer: "hammerjs/hammer"
})
]
//...
};

Import MaterializeCSS programatically, in the same place where you import angular2-materialize module (usually in
your main module, or shared module):

import 'materialize-css';
import { MaterializeModule } from 'angular2-materialize';

https://www.npmjs.com/package/angular2-materialize 5/8
31/3/2018 angular2-materialize - npm

Loading additional resources

Another thing you would need to confirm is being able to load web fonts properly:

{ test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/, loader: 'url-loader?limit=100000' },

Notice that the url-loader is required for this to work (npm install it).

The following example project is a fork of the angular2-webpack-starter with the addition of angular2-materialize:
InfomediaLtd/angular2-webpack-starter

Keywords

angular angular2 angular 2 angular 4 materialize materializecss materialize-css

materialize css

install

npm i angular2-materialize

last 7 days

3.500

version license
15.1.10 MIT

open issues pull requests

114 3

https://www.npmjs.com/package/angular2-materialize 6/8
31/3/2018 angular2-materialize - npm

repository
github.com

last publish
6 months ago

collaborators

test in your browser

You Need Help

Documentation
Support / Contact Us
Registry Status
Website Issues
CLI Issues
Security

About npm

About npm, Inc

Jobs
npm Weekly
Blog
Twitter
GitHub

https://www.npmjs.com/package/angular2-materialize 7/8
31/3/2018 angular2-materialize - npm

Legal Stu

Terms of Use
Code of Conduct
Package Name Disputes
Privacy Policy
Reporting Abuse
Other policies

npm loves you

https://www.npmjs.com/package/angular2-materialize 8/8