# Angular MDC

*NOTE: The Angular Components team at Google is working to deliver officially supported API-compatible versions of the Angular Material components backed by MDC Web. Follow the effort [here](https://github.com/angular/components#what-were-working-on-now-q2-2020)*

[![npm version](https://badge.fury.io/js/%40angular-mdc%2Fweb.svg)](https://badge.fury.io/js/%40angular-mdc%2Fweb)
![tests](https://github.com/trimox/angular-mdc-web/workflows/tests/badge.svg)

[Demos, documentation and guides](https://trimox.github.io/angular-mdc-web/)

Third-party integration incorporating [Google Material Components](https://github.com/material-components/material-components-web) for building beautiful, usable products using Material Design.

#### Quick Links
*  [Getting Started](https://trimox.github.io/angular-mdc-web/#/angular-mdc-web/getting-started)
*  [Changelog](https://github.com/trimox/angular-mdc-web/blob/master/CHANGELOG.md)
*  [Documentation and demos](https://trimox.github.io/angular-mdc-web/)
*  [StackBlitz Template](https://stackblitz.com/edit/angular-mdc)
*  [Contributing](https://github.com/trimox/angular-mdc-web/blob/master/CONTRIBUTING.md)
*  [Developer guide](https://github.com/trimox/angular-mdc-web/blob/master/docs/developer.md)

## Material Design Components
Using Google Material Components [foundations and adapters](https://github.com/material-components/material-components-web/blob/master/docs/integrating-into-frameworks.md#the-advanced-approach-using-foundations-and-adapters).

| Component  | Status  | Demo |
| ---------- | ------- | :------: |
| button | Available | [View](https://trimox.github.io/angular-mdc-web/#/button) |
| card | Available | [View](https://trimox.github.io/angular-mdc-web/#/card) |
| checkbox | Available | [View](https://trimox.github.io/angular-mdc-web/#/checkbox) |
| chips | Available | [View](https://trimox.github.io/angular-mdc-web/#/chips) |
| data-table | Available | [View](https://trimox.github.io/angular-mdc-web/#/data-table) |
| dialog | Available | [View](https://trimox.github.io/angular-mdc-web/#/dialog) |
| drawer | Available | [View](https://trimox.github.io/angular-mdc-web/#/drawer) |
| elevation | Available | [View](https://trimox.github.io/angular-mdc-web/#/elevation) |
| fab | Available | [View](https://trimox.github.io/angular-mdc-web/#/fab) |
| form-field | Available | [View](https://trimox.github.io/angular-mdc-web/#/form-field) |
| icon | Available | [View](https://trimox.github.io/angular-mdc-web/#/icon) |
| icon-button | Available | [View](https://trimox.github.io/angular-mdc-web/#/icon-button) |
| image-list | Available | [View](https://trimox.github.io/angular-mdc-web/#/image-list) |
| linear-progress | Available | [View](https://trimox.github.io/angular-mdc-web/#/linear-progress) |
| list | Available | [View](https://trimox.github.io/angular-mdc-web/#/list) |
| menu-surface | Available | [View](https://trimox.github.io/angular-mdc-web/#/menu-surface) |
| menu | Available | [View](https://trimox.github.io/angular-mdc-web/#/menu) |
| radio | Available | [View](https://trimox.github.io/angular-mdc-web/#/radio) |
| ripple | Available | [View](https://trimox.github.io/angular-mdc-web/#/ripple) |
| select | Available | [View](https://trimox.github.io/angular-mdc-web/#/select) |
| shape | Available | [View](https://trimox.github.io/angular-mdc-web/#/shape) |
| slider | Available | [View](https://trimox.github.io/angular-mdc-web/#/slider) |
| snackbar | Available | [View](https://trimox.github.io/angular-mdc-web/#/snackbar) |
| switch | Available | [View](https://trimox.github.io/angular-mdc-web/#/switch) |
| tabs | Available | [View](https://trimox.github.io/angular-mdc-web/#/tabs) |
| text-field | Available | [View](https://trimox.github.io/angular-mdc-web/#/text-field) |
| theme | Available | [View](https://trimox.github.io/angular-mdc-web/#/angular-mdc-web/theme) |
| top-app-bar | Available | [View](https://trimox.github.io/angular-mdc-web/#/top-app-bar) |
| typography | Available | [View](https://trimox.github.io/angular-mdc-web/#/typography) |

## Browser Support
We officially support the last two versions of every major browser.

- **Chrome** on Android, Windows, macOS, and Linux
- **Firefox** on Windows, macOS, and Linux
- **Safari** on iOS and macOS
- **Edge** on Windows
- **IE 11** on Windows

## Thank you
To the [Angular Components](https://github.com/angular/components) team at Google for their instrumental community support of `@angular/cdk` and to providing high-quality clean code!
