Material Design for Angular

Component infrastructure and Material Design components for Angular

README

Official components for Angular npm version Build status Gitter


The Angular team builds and maintains both common UI components and tools to help you build your
own custom components. The team maintains several npm packages.

PackageDescriptionDocs
----------------------------------------------------------------------------------------------------------------------------
`@angular/cdk`Library[Docs][cdk-docs]
`@angular/material`[Material[Docs][mat-docs]
`@angular/google-maps`Angular[Docs][map-docs]
`@angular/youtube-player`Angular[Docs][ytp-docs]


Quick links

[Documentation, demos, and guides][mat-docs] |

Getting started


See our [Getting Started Guide][getting-started] if you're building your first project with Angular
Material.


Contributing


If you'd like to contribute, please follow our [contributing guidelines][contributing]. Please see
our [help wanted][help-wanted] label for a list of issues with good opportunities for
contribution.

What we're working on now (Q4 2021):

Continuing to create new, API-compatible versions of the Angular Material components backed by
[MDC Web][] (see @jelbourn's ng-conf talk). Much of our effort
is dedicated towards rolling out these new versions of the components across Angular apps
inside Google. This work will pay off with the following benefits:
  Dramatically improve consistency with the Material Design spec, which has changed significantly
    since Angular Material's 2016 inception. This also makes future versions of Material Design
    significantly easier to adopt.
  Introduce a new theming API for component density, a top feature request.
  Fix a number of longstanding accessibility bugs.
  Increase number of people working to continuously improve the components on an ongoing basis
    (both the Angular team and the Material Design team).
Accessibility - we'll be focusing on improving the accessibility of MatDatepicker as well as
evaluating accessibility bugs for mobile web platforms.


About the team

The Angular Components team is part of the Angular team at Google. The team includes both Google
employees and community contributors from around the globe.

Our team has two primary goals:
Build high-quality UI components that developers can drop into existing applications
Provide tools that help developers build their own custom components with common interaction
patterns


What do we mean by "high-quality" components?
Internationalized and accessible so that all users can use them.
Straightforward APIs that don't confuse developers.
Behave as expected across a wide variety of use-cases without bugs.
Behavior is well-tested with both unit and integration tests.
Customizable within the bounds of the Material Design specification.
Performance cost is minimized.
Code is clean and well-documented to serve as an example for Angular developers.

Browser and screen reader support

The Angular Components team supports the most recent two versions of all major browsers:
Chrome (including Android), Firefox, Safari (including iOS), and  Edge.

We aim for great user experience with the following screen readers:
Windows: NVDA and JAWS with FF / Chrome.
macOS: VoiceOver with Safari / Chrome.
iOS: VoiceOver with Safari
Android: Android Accessibility Suite (formerly TalkBack) with Chrome.
Chrome OS: ChromeVox with Chrome.


[Material Design]: https://material.io
[Google Maps JavaScript API]: https://developers.google.com/maps/documentation/javascript/tutorial
[YouTube Player API]: https://developers.google.com/youtube/iframe_api_reference
[MDC Web]: https://github.com/material-components/material-components-web/
[cdk-docs]: https://material.angular.io/cdk/categories
[mat-docs]: https://material.angular.io
[map-docs]: https://github.com/angular/components/blob/main/src/google-maps/README.md
[ytp-docs]: https://github.com/angular/components/blob/main/src/youtube-player/README.md
[getting-started]: https://material.angular.io/guide/getting-started
[contributing]: https://github.com/angular/components/blob/main/CONTRIBUTING.md
[help-wanted]: https://github.com/angular/components/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22