{"id":13475931,"url":"https://github.com/InfomediaLtd/angular2-materialize","last_synced_at":"2025-03-27T01:30:35.430Z","repository":{"id":57179651,"uuid":"51283658","full_name":"InfomediaLtd/angular2-materialize","owner":"InfomediaLtd","description":"Angular 2 support for Materialize CSS framework.","archived":false,"fork":false,"pushed_at":"2020-04-29T22:59:11.000Z","size":2036,"stargazers_count":408,"open_issues_count":130,"forks_count":142,"subscribers_count":31,"default_branch":"master","last_synced_at":"2024-04-28T07:18:35.548Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://infomedialtd.github.io/angular2-materialize/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/InfomediaLtd.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-02-08T07:06:58.000Z","updated_at":"2024-01-03T10:13:41.000Z","dependencies_parsed_at":"2022-09-14T03:30:45.038Z","dependency_job_id":null,"html_url":"https://github.com/InfomediaLtd/angular2-materialize","commit_stats":null,"previous_names":[],"tags_count":69,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/InfomediaLtd%2Fangular2-materialize","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/InfomediaLtd%2Fangular2-materialize/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/InfomediaLtd%2Fangular2-materialize/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/InfomediaLtd%2Fangular2-materialize/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/InfomediaLtd","download_url":"https://codeload.github.com/InfomediaLtd/angular2-materialize/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245764594,"owners_count":20668447,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T16:01:24.851Z","updated_at":"2025-03-27T01:30:34.544Z","avatar_url":"https://github.com/InfomediaLtd.png","language":"TypeScript","readme":"# Angular2 Materialize\n\n[![travis build](https://img.shields.io/travis/InfomediaLtd/angular2-materialize.svg?style=flat-square)](https://travis-ci.org/InfomediaLtd/angular2-materialize)\n[![version](https://img.shields.io/npm/v/angular2-materialize.svg?style=flat-square)](https://www.npmjs.com/package/angular2-materialize)\n[![downloads](https://img.shields.io/npm/dm/angular2-materialize.svg?style=flat-square)](https://www.npmjs.com/package/angular2-materialize)\n[![MIT Licence](https://img.shields.io/npm/l/angular2-materialize.svg?style=flat-square)](https://opensource.org/licenses/MIT)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)](https://github.com/semantic-release/semantic-release)\n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)](http://commitizen.github.io/cz-cli/)\n[![PRs Welcome](https://img.shields.io/badge/prs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)\n\n[![NPM](https://nodei.co/npm/angular2-materialize.png?downloads=true)](https://www.npmjs.com/package/angular2-materialize)\n[![NPM](https://nodei.co/npm-dl/angular2-materialize.png?height=2\u0026months=12)](https://www.npmjs.com/package/angular2-materialize)\n\nAngular 2 support for Materialize CSS framework [http://materializecss.com/](http://materializecss.com/)\n\nThis 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.\n\nView demo here: [https://infomedialtd.github.io/angular2-materialize/](https://infomedialtd.github.io/angular2-materialize/)\n\nTo 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.\n\n## Using angular2-materialize\n\nStart by following the Angular CLI or webpack instructions below to add the required dependencies to your project.\n\nAdd the MaterializeModule to your NgModule:\n```js\nimport { MaterializeModule } from \"angular2-materialize\";\n\n@NgModule({\n  imports: [\n    //...\n    MaterializeModule,\n  ],\n  //...\n})\n```\n\nIn your component, use it for dynamic behavior. For example, for collapsible panels:\n```js\n@Component({\n    selector: \"my-component\",\n    template: `\n        \u003cul materialize=\"collapsible\" class=\"collapsible\" data-collapsible=\"accordion\"\u003e\n          \u003cli\u003e\n            \u003cdiv class=\"collapsible-header\"\u003e\u003ci class=\"material-icons\"\u003efilter_drama\u003c/i\u003eFirst\u003c/div\u003e\n            \u003cdiv class=\"collapsible-body\"\u003e\u003cp\u003eLorem ipsum dolor sit amet.\u003c/p\u003e\u003c/div\u003e\n          \u003c/li\u003e\n          \u003cli\u003e\n            \u003cdiv class=\"collapsible-header\"\u003e\u003ci class=\"material-icons\"\u003eplace\u003c/i\u003eSecond\u003c/div\u003e\n            \u003cdiv class=\"collapsible-body\"\u003e\u003cp\u003eLorem ipsum dolor sit amet.\u003c/p\u003e\u003c/div\u003e\n          \u003c/li\u003e\n          \u003cli\u003e\n            \u003cdiv class=\"collapsible-header\"\u003e\u003ci class=\"material-icons\"\u003ewhatshot\u003c/i\u003eThird\u003c/div\u003e\n            \u003cdiv class=\"collapsible-body\"\u003e\u003cp\u003eLorem ipsum dolor sit amet.\u003c/p\u003e\u003c/div\u003e\n          \u003c/li\u003e\n        \u003c/ul\u003e\n\n```\n\nApply an empty [MaterializeDirective](https://github.com/InfomediaLtd/angular2-materialize/blob/master/src/materialize-directive.ts) attribute directive for top level components, like forms:\n```html\n\u003cform materialize class=\"col s12\"\u003e\n  \u003cdiv class=\"row\"\u003e\n    \u003cdiv class=\"input-field col s6\"\u003e\n      \u003cinput placeholder=\"Placeholder\" id=\"first_name\" type=\"text\" class=\"validate\"\u003e\n      \u003clabel for=\"first_name\"\u003eFirst Name\u003c/label\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/form\u003e\n```\n\nThe [MaterializeDirective](https://github.com/InfomediaLtd/angular2-materialize/blob/master/src/materialize-directive.ts) 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.\n\nFor example, to apply tooltip:\n```html\n\u003ca materialize=\"tooltip\" class=\"btn tooltipped\" data-position=\"bottom\" data-delay=\"50\" data-tooltip=\"I am tooltip\"\u003eHover me!\u003c/a\u003e\n```\n\nThe [Materialize](https://github.com/InfomediaLtd/angular2-materialize/blob/master/src/materialize.ts) 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.\n\nAnother 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](https://angular.io/docs/ts/latest/api/core/index/EventEmitter-class.html). The emitted events can either be a \"string\" type action (Materialize function call) or a structure with action and parameters:\n\nThe example below shows how you'd create a modal dialog and use the actions to open or close it.\n```html\n\u003c!-- Modal Trigger --\u003e\n\u003ca class=\"waves-effect waves-light btn modal-trigger\" (click)=\"openModal()\"\u003eModal\u003c/a\u003e\n\n\u003c!-- Modal Structure --\u003e\n\u003cdiv id=\"modal1\" class=\"modal bottom-sheet\" materialize=\"modal\" [materializeParams]=\"[{dismissible: false}]\" [materializeActions]=\"modalActions\"\u003e\n  \u003cdiv class=\"modal-content\"\u003e\n    \u003ch4\u003eModal Header\u003c/h4\u003e\n    \u003cp\u003eA bunch of text\u003c/p\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"modal-footer\"\u003e\n    \u003ca class=\"waves-effect waves-green btn-flat\" (click)=\"closeModal()\"\u003eClose\u003c/a\u003e\n    \u003ca class=\"modal-action modal-close waves-effect waves-green btn-flat\"\u003eAgree\u003c/a\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n```js\n  import {MaterializeAction} from 'angular2-materialize';\n  //...\n  modalActions = new EventEmitter\u003cstring|MaterializeAction\u003e();\n  openModal() {\n    this.modalActions.emit({action:\"modal\",params:['open']});\n  }\n  closeModal() {\n    this.modalActions.emit({action:\"modal\",params:['close']});\n  }\n```\n\nFor dynamic select elements apply the **materializeSelectOptions** directive to trigger element updates when the options list changes:\n```html\n\u003cselect materialize=\"material_select\" [materializeSelectOptions]=\"selectOptions\"\u003e\n  \u003coption *ngFor=\"let option of selectOptions\" [value]=\"option.value\"\u003e{{option.name}}\u003c/option\u003e\n\u003c/select\u003e\n```\n\n## Installing \u0026 configuring angular2-materialize in projects created with the Angular CLI\n\nInstall MaterializeCSS and angular2-materialize from npm\n```\nnpm install materialize-css --save\nnpm install angular2-materialize --save\n```\n\njQuery 2.2 and Hammer.JS are required\n```\nnpm install jquery@^2.2.4 --save\nnpm install hammerjs --save\n```\n\nEdit the angular-cli.json :\n* 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:\n\n```\n  \"../node_modules/materialize-css/dist/css/materialize.css\"\n```\n\n* Go to section apps and find scripts array inside it, and add the following lines inside array\n\n```\n  \"../node_modules/jquery/dist/jquery.js\",\n  \"../node_modules/hammerjs/hammer.js\",\n  \"../node_modules/materialize-css/dist/js/materialize.js\"\n```\n\nAdd to the top of app.module.ts\n\n```\nimport { MaterializeModule } from 'angular2-materialize';\n\n```\n\nAdd MaterializeModule inside imports array of @NgModule decorator in app.module.ts\n\nAdd this line to header of index.html\n```\n\u003clink href=\"http://fonts.googleapis.com/icon?family=Material+Icons\" rel=\"stylesheet\"\u003e\n```\n\n## Installing and configuring angular2-materialize with webpack\n\nInstall MaterializeCSS and angular2-materialize from npm\n```sh\nnpm install materialize-css --save\nnpm install angular2-materialize --save\n```\n\nMaterializeCSS required jQuery and HammerJS. Check the exact version materialize-css is compatible with:\n```sh\nnpm install jquery@^2.2.4 --save\nnpm install hammerjs --save\n```\n\nAdd the Google MD fonts to your index.html:\n```html\n\u003clink href=\"http://fonts.googleapis.com/icon?family=Material+Icons\" rel=\"stylesheet\"\u003e\n```\n\nImport materialize-css styles:\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css\"\u003e\n```\n\nAdd the following plugin to your webpack configuration to provide jQuery:\n```js\nconst ProvidePlugin = require('webpack/lib/ProvidePlugin');\nmodule.exports = {\n  //...\n  plugins: [\n      new ProvidePlugin({\n          \"window.jQuery\": \"jquery\",\n          Hammer: \"hammerjs/hammer\"\n      })\n  ]\n  //...\n};\n```\n\nImport MaterializeCSS programatically, in the same place where you import angular2-materialize module (usually in your main module, or shared module):\n```js\nimport 'materialize-css';\nimport { MaterializeModule } from 'angular2-materialize';\n```\n\n#### Loading additional resources\n\nAnother thing you would need to confirm is being able to load web fonts properly:\n```js\n{ test: /.(png|woff(2)?|eot|ttf|svg)(\\?[a-z0-9=\\.]+)?$/, loader: 'url-loader?limit=100000' },\n```\nNotice that the url-loader is required for this to work (npm install it).\n\nThe following example project is a fork of the angular2-webpack-starter with the addition of angular2-materialize: [InfomediaLtd/angular2-webpack-starter](https://github.com/InfomediaLtd/angular2-webpack-starter)\n\n","funding_links":[],"categories":["TypeScript","Uncategorized","Angular","Awesome Angular [![Awesome TipeIO](https://img.shields.io/badge/Awesome%20Angular-@TipeIO-6C6AE7.svg)](https://github.com/gdi2290/awesome-angular) [![Awesome devarchy.com](https://img.shields.io/badge/Awesome%20Angular-@devarchy.com-86BDC1.svg)](https://github.com/brillout/awesome-angular-components)"],"sub_categories":["Uncategorized","Frameworks","Angular \u003ca id=\"angular\"\u003e\u003c/a\u003e"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FInfomediaLtd%2Fangular2-materialize","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FInfomediaLtd%2Fangular2-materialize","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FInfomediaLtd%2Fangular2-materialize/lists"}