https://github.com/dsebastien/regform
Simple app that integrates Angular 2 and Material Design Lite
https://github.com/dsebastien/regform
angular material material-design
Last synced: 5 months ago
JSON representation
Simple app that integrates Angular 2 and Material Design Lite
- Host: GitHub
- URL: https://github.com/dsebastien/regform
- Owner: dsebastien
- License: mit
- Created: 2015-11-27T05:20:21.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2018-06-02T17:12:45.000Z (about 8 years ago)
- Last Synced: 2025-04-07T14:28:29.833Z (about 1 year ago)
- Topics: angular, material, material-design
- Language: PHP
- Size: 1.43 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 180
-
Metadata Files:
- Readme: README.md
- License: LICENSE.MD
Awesome Lists containing this project
README
# regform
## About
Registration form is a simple proof of concept to integrate Angular 2 and Material Design Lite.
This project was created using the [ModernWebDev Yeoman Generator](https://github.com/dsebastien/modernWebDevGenerator) by [dSebastien](https://twitter.com/dSebastien).
## Material Design Lite integration
When Angular 2 instanciates the views (i.e., parses the templates and generates new DOM elements), the generated DOM elements corresponding to Material Design Lite elements are not 'registered'. That step is necessary so that the JavaScript part of Material Design Lite can work for those components.
This is described here: http://www.getmdl.io/started/index.html#dynamic.
In order to make this work, there are multiple options that all involve the componentHandler, which is a global object added by Material Design Lite when it loads.
In this project I'm trying out the different options; so far:
* function scheduled with setInterval after the boostrap of the Angular 2 appl that uses the [MutationObserver](https://developer.mozilla.org/en/docs/Web/API/MutationObserver) API to be notified of DOM changes and calls `componentHandler.upgradeDom()` when needed
* @Directive to manually attach to each Material Design Lite component that takes care of the registration using `componentHandler.upgradeElement(htmlElement)`
There are more options to try out though:
* an `afterViewInit` hook
* a custom decorator that does this for all components (could be more effective and less intrusive)
* another solution that could do this globally with the least effort
* ...
I've taken some inspiration from: https://github.com/jadjoubran/angular-material-design-lite
## How to build
First, make sure that you have installed the required global npm packages: `npm install gulp --global --no-optional`.
Next, if you have used the `--skip-install` option, then you also need to install the project dependencies using `npm run setup`.
For more details about the build, refer to the [ModernWebDevBuild](https://github.com/dsebastien/modernWebDevBuild) project documentation.
## Jetbrains love
We're supported by [Jetbrains](https://www.jetbrains.com) and their awesome [support for open source](https://www.jetbrains.com/buy/opensource/), thanks to which we are able to use the best products on the market to work on this open source project!
