{"id":14973577,"url":"https://github.com/sherweb/ngx-materialize","last_synced_at":"2025-03-30T04:30:55.334Z","repository":{"id":45646938,"uuid":"77174289","full_name":"sherweb/ngx-materialize","owner":"sherweb","description":"Angular wrap around Materialize library","archived":true,"fork":false,"pushed_at":"2024-11-06T14:58:06.000Z","size":22554,"stargazers_count":314,"open_issues_count":39,"forks_count":75,"subscribers_count":22,"default_branch":"master","last_synced_at":"2025-03-24T03:48:20.438Z","etag":null,"topics":["angular","component","material","material-design","materialize","materialize-css","ngx"],"latest_commit_sha":null,"homepage":"https://sherweb.github.io/ngx-materialize/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sherweb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-12-22T20:37:47.000Z","updated_at":"2025-02-14T14:51:01.000Z","dependencies_parsed_at":"2024-12-27T06:45:17.027Z","dependency_job_id":null,"html_url":"https://github.com/sherweb/ngx-materialize","commit_stats":{"total_commits":250,"total_committers":25,"mean_commits":10.0,"dds":0.628,"last_synced_commit":"0c1be35ee1606e4798c50d296d5737d3f2e5d884"},"previous_names":["sherweb/ng2-materialize"],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sherweb%2Fngx-materialize","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sherweb%2Fngx-materialize/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sherweb%2Fngx-materialize/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sherweb%2Fngx-materialize/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sherweb","download_url":"https://codeload.github.com/sherweb/ngx-materialize/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246277352,"owners_count":20751548,"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":["angular","component","material","material-design","materialize","materialize-css","ngx"],"created_at":"2024-09-24T13:48:58.897Z","updated_at":"2025-03-30T04:30:55.321Z","avatar_url":"https://github.com/sherweb.png","language":"TypeScript","readme":"\u003e [!CAUTION]\n\u003e This repoitory is unmaintained and **should not be used in production**\n\n\n\u003cdiv class=\"readme-github-logo\"\u003e\n  \u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://github.com/sherweb/ngx-materialize/raw/master/demo/src/assets/ngx-materialize-circle.png\"\u003e\n  \u003c/p\u003e\n  \u003ch1 align=\"center\"\u003engx-materialize\u003c/h1\u003e\n  \u003cp align=\"center\"\u003e\n    \u003ca href=\"https://circleci.com/gh/sherweb/ngx-materialize\"\u003e\n      \u003cimg alt=\"CircleCI Status\" src=\"https://circleci.com/gh/sherweb/ngx-materialize.svg?style=shield\u0026circle-token=4f457a3c93c34ad9cdf21cbe53605dad94f21955\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://ci.appveyor.com/project/sherweb/ngx-materialize\"\u003e\n      \u003cimg alt=\"AppVeyor Status\" src=\"https://ci.appveyor.com/api/projects/status/github/sherweb/ngx-materialize?branch=master\u0026svg=true\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/ngx-materialize\"\u003e\n      \u003cimg alt=\"NPM Version\" src=\"https://img.shields.io/npm/v/ngx-materialize.svg?style=flat\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://opensource.org/licenses/Apache-2.0\"\u003e\n      \u003cimg alt=\"License\" src=\"https://img.shields.io/npm/l/ngx-materialize.svg\"\u003e\n    \u003c/a\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"readme-summary\"\u003e\n  \u003cp align=\"center\"\u003e\n    This library is an \u003ca href=\"https://angular.io/\"\u003eAngular\u003c/a\u003e wrap around \u003ca href=\"http://materializecss.com/\"\u003eMaterialize\u003c/a\u003e library, a responsive CSS/JS framework that implements Material Design specifications from Google.\n  \u003c/p\u003e\n  \u003cp align=\"center\"\u003e\n    Demo and documentation : \u003ca href=\"https://sherweb.github.io/ngx-materialize/\"\u003ehttps://sherweb.github.io/ngx-materialize/\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n\n## Why ngx-materialize?\n\nThe 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.\n\nIn other words, we ...\n\n- Simplify components usage\n- Initialize components automatically\n- Handle Angular \"quirks\" with Materialize library\n- Offer component injection when possible\n- Provide a MediaService that allow customization according to view port size\n- Add support for ReactiveForm with validation\n\n\n### Table of contents\n- [Installation](#installation)\n- [Icons](#icons)\n- [Animation](#animation)\n- [Usage](#usage)\n- [Available features](#available-features)\n- [Demo application](#demo-application)\n- [Contribute](#contribute)\n- [Credits](#credits)\n\n## Installation\n\nThe following commands will add ngx-materialize library to your `package.json` file along with its dependencies: Materialize CSS and jQuery.\n\n```\nnpm install --save ngx-materialize\n```\n\nDon't forget to include Materialize and jQuery in your application.\n\nIf you are using [Angular-CLI](https://github.com/angular/angular-cli) you can follow the example below :\n\n#### angular.json\n\n```diff\n\"styles\": [\n  \"src/styles.scss\",\n+ \"node_modules/materialize-css/dist/css/materialize.min.css\"\n],\n\"scripts\": [\n+ \"node_modules/jquery/dist/jquery.min.js\",\n+ \"node_modules/materialize-css/dist/js/materialize.min.js\"\n],\n```\n\n#### tsconfig\n\n```diff\n{\n  \"extends\": \"../tsconfig.json\",\n  \"compilerOptions\": {\n    \"outDir\": \"../out-tsc/app\",\n    \"module\": \"es2015\",\n    \"types\": [\n+      \"jquery\",\n+      \"materialize-css\"\n    ]\n  },\n  \"exclude\": [\n    \"src/test.ts\",\n    \"**/*.spec.ts\"\n  ]\n}\n```\n\nSee 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).\n\n## Icons\n\nNgx-materialize offers two \"out-of-the-box\" options for icons although you are free to use the library of your choice.\n\n### Material Design Icons\nTo use [Material Design Icons](https://materialdesignicons.com/) (community project based on Google Material Icons with lots of added icons), which is used with `mz-icon-mdi` directive, you will need to add the library with the following command:\n\n```\nnpm install --save @mdi/font\n```\n\nDon't forget to include Mdi library to your application.\n\nIf you are using [Angular-CLI](https://github.com/angular/angular-cli) you can follow the example below :\n\n#### angular.json\n\n```diff\n\"styles\": [\n  \"src/styles.scss\",\n  \"node_modules/materialize-css/dist/css/materialize.min.css\",\n+ \"node_modules/@mdi/font/css/materialdesignicons.min.css\"\n],\n```\n\n### Material Icons\nTo use [Material Icons](https://material.io/icons/) (official Google Material Icons library), which is used with `mz-icon` directive, you will need to add the following into the `\u003chead\u003e` tag of your `index.html` file:\n\n```html\n\u003clink href=\"https://fonts.googleapis.com/icon?family=Material+Icons\" rel=\"stylesheet\"\u003e\n```\n\n## Animation\nSome components are using advance animation transition. You need to install `@angular/animations` and include `BrowserAnimationsModule` if you want those animation to work.\n\n```\nnpm install --save @angular/animations\n```\n```diff\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n+ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';\n\nimport { AppModule } from './app.module';\n\n@NgModule({\n  imports: [\n+    BrowserAnimationsModule,\n  ],\n})\nexport class AppModule { }\n```\n\nIf you don't want to install a new dependency in your application, you can include `NoopAnimationsModule`.\n```diff\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n+ import { NoopAnimationsModule } from '@angular/platform-browser/animations';\n\nimport { AppModule } from './app.module';\n\n@NgModule({\n  imports: [\n+    NoopAnimationsModule,\n  ],\n})\nexport class AppModule { }\n```\n\n## Usage\n\nYou must import component module you want to use inside your module to be able to use Materialize components.\n\n```diff\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n+ import { MzButtonModule, MzInputModule } from 'ngx-materialize';\n\nimport { HomeComponent } from './home.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n+   MzButtonModule,\n+   MzInputModule,\n  ],\n  declarations: [ HomeComponent ],\n})\nexport class HomeModule { }\n```\n\n\n### MaterializeModule deprecated\nWe will continue to maintain this module for a period of time to allow you to migrate your existing components to the new way.\nWe recommend to use the new component modules when you are building new component/application.\n\nIf you still want to import only one module, you can create a separate `NgModule` in your application that imports all the `ngx-materialize` components. You will be able to include this module anywhere you like to use the components.\n\n```\nimport { MzInputModule, MzValidationModule } from 'ngx-materialize';\n\n@NgModule({\n  imports: [\n    MzInputModule,\n    MzValidationModule,\n  ],\n  exports: [\n    MzInputModule,\n    MzValidationModule,\n  ],\n})\nexport class CustomMaterializeModule { }\n```\n\n## Available features\n\n Page listed in [Native CCS Class](./native-css-class) will not be wrapped.\n\n### Components\n\n* Badge\n* Button\n* Card\n* Checkbox\n* Chip\n* Collapsible\n* Collection\n* Datepicker\n* Dropdown\n* Feature discovery\n* Form validation\n* Icon\n* Input\n* Modal\n* Navbar\n* Pagination\n* Parallax\n* Progress\n* Radio-Button\n* Select\n* Sidenav\n* Spinner\n* Switch\n* Tab\n* Textarea\n* Timepicker\n* Toast\n* Tooltip\n\n### Services\n\n* Media\n\n## Demo application\n\nA demo application is available at [https://sherweb.github.io/ngx-materialize/](https://sherweb.github.io/ngx-materialize/), or refer to the `./demo` folder and its [README](./demo/README.md).\n\n## Road map\n\nWe (at SherWeb) are currently wrapping the components as we need them, and unfortunately, we cannot provide a specific road map.\n\nIf some components are missing, feel free to contribute.\n\n## Contribute\n\nContributions are always welcome.\n\nMake sure that :\n- Your code style matches with the rest of the project\n- Unit tests pass\n- Linter passes\n\nAnd you are ready to go!\n\n## Credits\n\nThanks to [Ali Mohammadi](https://github.com/ayalma) for donating the npm package name.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsherweb%2Fngx-materialize","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsherweb%2Fngx-materialize","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsherweb%2Fngx-materialize/lists"}