Angular 2 support for Materialize CSS framework
npm install @samuelberthe/angular2-materializeThis repo is a fork from InfomediaLtd/angular2-materialize that is not maintained on a regular basis.
Fully compatible with Angular 6 and MaterializeCss 1.0.0-rc.2









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://samber.github.io/angular2-materialize/
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.
Start by following the Angular CLI or webpack instructions below to add the required dependencies to your project.
Add the MaterializeModule to your NgModule:
``js
import { MaterializeModule } from "@samuelberthe/angular2-materialize";
@NgModule({
imports: [
//...
MaterializeModule,
],
//...
})
`
In your component, use it for dynamic behavior. For example, for collapsible panels:
`js
@Component({
selector: "my-component",
template:
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
``
Apply an empty MaterializeDirective attribute directive for top level components, like forms:
`html`
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, Chips, Modal, Tooltip, Dropdown, Tabs, FormSelect, Sidenav, FloatingActionButton, TapTarget, Carousel, Parallax, CharacterCounter, Autocomplete, Materialbox, ScrollSpy, etc.
For example, to apply tooltip:
`html`
Hover me!
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 component methods, 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 method 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.
`html
Modal
`js
import {MaterializeAction} from '@samuelberthe/angular2-materialize';
//...
modalActions = new EventEmitter();
openModal() {
this.modalActions.emit({action:"open",params:[]});
}
closeModal() {
this.modalActions.emit({action:"close",params:[]});
}
`For dynamic select elements apply the materializeSelectOptions directive to trigger element updates when the options list changes:
`html
`Upgrading from angular2-materialize@15.x.x
New api for
materializeActions EventEmitter ("methods" in the new MaterializeCSS vocabulary). Example with modals:`
...
``
this.modal.emit({ action: "open", params: [] });
`instead of
`
this.modal.emit({ action: "modal", params: ['open'] });
`Also a lot of breaking changes in component HTML and CSS (and sometimes js attributes). Please refer to official MaterializeCSS doc.
Installing & configuring @samuelberthe/angular2-materialize in projects created with the Angular CLI
Install MaterializeCSS and @samuelberthe/angular2-materialize from npm
`
npm install materialize-css --save
npm install @samuelberthe/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 '@samuelberthe/angular2-materialize';`Add MaterializeModule inside imports array of @NgModule decorator in app.module.ts
Add this line to header of index.html
`
`Installing and configuring @samuelberthe/angular2-materialize with webpack
Install MaterializeCSS and @samuelberthe/angular2-materialize from npm
`sh
npm install materialize-css --save
npm install @samuelberthe/angular2-materialize --save
`MaterializeCSS required jQuery and HammerJS. Check the exact version materialize-css is compatible with:
`sh
npm install jquery@^2.2.4 --save
npm install hammerjs --save
`Add the Google MD fonts to your index.html:
`html
`Import materialize-css styles:
`html
`Add the following plugin to your webpack configuration to provide jQuery:
`js
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 @samuelberthe/angular2-materialize module (usually in your main module, or shared module):
`js
import 'materialize-css';
import { MaterializeModule } from '@samuelberthe/angular2-materialize';
`#### Loading additional resources
Another thing you would need to confirm is being able to load web fonts properly:
`js
{ test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/, loader: 'url-loader?limit=100000' },
``The following example project is a fork of the angular2-webpack-starter with the addition of @samuelberthe/angular2-materialize: InfomediaLtd/angular2-webpack-starter