angular-material-components - GitLite

KO | EN

gitlite — search

#javascript #hacktoberfest #react #typescript #android #macos #windows #cli #kubernetes #awesome-list #vue #ios #mcp #open-source

angular-material-components

(★ 345)

Angular Material Library provide extra components for every project

File Explorer

Download Latest Version (.zip)

- - btn_donate_LG.gif
  - GitHub-Mark-Light-32px.png
- 224.a855590b9ce34360.js
- 251.b29bd93891786671.js
- 342.96c0c19f6340dd37.js
- 3rdpartylicenses.txt
- 602.73291f3aa6b2838d.js
- 742.e578b41b2f45883b.js
- 810.38006fc786d7da33.js
- 975.279d9a3c74fa1f5e.js
- favicon.ico
- index.html
- main.a95e9680214dbe10.js
- polyfills.faca58ed8f1182ed.js
- runtime.e0ca50528de75791.js
- styles.453488c7f6e8d689.css
- - app.e2e-spec.ts
  - app.po.ts
- protractor.conf.js
- tsconfig.e2e.json
- - karma.conf.js
  - ng-package.json
  - package.json
  - README.md
  - tsconfig.lib.json
  - tsconfig.spec.json
  - tslint.json
- - karma.conf.js
  - LICENSE
  - ng-package.json
  - package.json
  - README.md
  - tsconfig.lib.json
  - tsconfig.spec.json
  - tslint.json
- - karma.conf.js
  - ng-package.json
  - package.json
  - README.md
  - tsconfig.lib.json
  - tsconfig.spec.json
  - tslint.json
- - karma.conf.js
  - ng-package.json
  - package.json
  - README.md
  - tsconfig.lib.json
  - tsconfig.spec.json
  - tslint.json
- - app.component.html
  - app.component.scss
  - app.component.ts
  - app.module.ts
- - .gitkeep
  - btn_donate_LG.gif
  - GitHub-Mark-Light-32px.png
- - environment.prod.ts
  - environment.ts
- favicon.ico
- index.html
- karma.conf.js
- main.ts
- polyfills.ts
- styles.scss
- test.ts
- tsconfig.app.json
- tsconfig.spec.json
- tslint.json
.editorconfig
.gitignore
.travis.yml
angular.json
CHANGELOG.md
demo_color_picker.png
demo_datetime_picker.png
demo_file_input.png
LICENSE
package-lock.json
package.json
README.md
tsconfig.json
tslint.json

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Angular Material Extra Components (DatetimePicker, TimePicker, ColorPicker, FileInput ...) for @angular/material 7.x, 8.x, 9.x, 10.x, 11.x, 12.x, 13.x, 14.x, 15.x, 16.x

[![Build Status](https://travis-ci.com/h2qutc/angular-material-components.svg?branch=master)](https://travis-ci.com/h2qutc/angular-material-components)
[![License](https://img.shields.io/npm/l/angular-material-components.svg)](https://www.npmjs.com/package/angular-material-components)

## Description

Angular Material Library provide extra components for every project (Datetime picker, Time picker, Color picker...).

Please do not hesitate to contact us if you have any question or suggestion.

Feel free to open the [issues](https://github.com/h2qutc/angular-material-components/issues) or provide a PR.

If you like this project, support angular-material-components by starring⭐.

And thank you so much for your coffee ❤️

<a href="https://www.buymeacoffee.com/h2qutc" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>

## DEMO Angular Material Components

@see [LIVE DEMO AND DOCUMENTATION](https://h2qutc.github.io/angular-material-components/)

Choose the version corresponding to your Angular version:

Angular     | @angular-material-components/datetime-picker
 ----------- | -------------------
 16          | 16.x+
 15          | 15.x+ OR 9.x+ for legacy import
 14          | 8.x+
 13          | 7.x+
 12          | 6.x+
 11          | 5.x+
 10          | 4.x+
 9           | 2.x+
 8           | 2.x+
 7           | 2.x+

### Datetime Picker

[![npm version](https://badge.fury.io/js/%40angular-material-components%2Fdatetime-picker.svg)](https://www.npmjs.com/package/@angular-material-components/datetime-picker)
[![Github All Releases](https://img.shields.io/npm/dt/@angular-material-components/datetime-picker.svg)]()

[TUTORIAL HERE](https://h2qutc.github.io/angular-material-components/)

```
npm install --save  @angular-material-components/datetime-picker
```

![Alt Text](https://raw.githubusercontent.com/h2qutc/angular-material-components/master/demo_datetime_picker.png)

@see [DEMO stackblitz for Angular 7, Angular 8](https://stackblitz.com/edit/demo-ngx-mat-datetime-picker)

@see [DEMO stackblitz for Angular 9](https://stackblitz.com/edit/demo-ngx-mat-datetime-picker-angular9)

### Color Picker

[![npm version](https://badge.fury.io/js/%40angular-material-components%2Fcolor-picker.svg)](https://www.npmjs.com/package/@angular-material-components/color-picker)
[![Github All Releases](https://img.shields.io/npm/dt/@angular-material-components/color-picker.svg)]()

[TUTORIAL HERE](https://h2qutc.github.io/angular-material-components/)

```
npm install --save  @angular-material-components/color-picker
```

![Alt Text](https://raw.githubusercontent.com/h2qutc/angular-material-components/master/demo_color_picker.png)
@see [DEMO stackblitz](https://stackblitz.com/edit/demo-ngx-mat-color-picker)

### File Input

[![npm version](https://badge.fury.io/js/%40angular-material-components%2Ffile-input.svg)](https://www.npmjs.com/package/@angular-material-components/file-input)
[![Github All Releases](https://img.shields.io/npm/dt/@angular-material-components/file-input.svg)]()

[TUTORIAL HERE](https://h2qutc.github.io/angular-material-components/)

```
npm install --save  @angular-material-components/file-input
```

![Alt Text](https://raw.githubusercontent.com/h2qutc/angular-material-components/master/demo_file_input.png)

### Theming
- @see @angular/material [Using a pre-built theme](https://material.angular.io/guide/theming#using-a-pre-built-theme)
- Add the Material Design icon font to your index.html
```
<link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block" rel="stylesheet">
```

## License
MIT