npm.devtool.tech
👏 You can access @angular/material package with using angularMaterial variable in browser devtools!
Angular Material

code/package/bundle size

0B
publish
0B
install
0B
bundle minified
0B
bundle gzipped

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/cdkLibrary that helps you author custom UI components with common interaction patternsDocs
@angular/materialMaterial Design UI components for Angular applicationsDocs
@angular/google-mapsAngular components built on top of the Google Maps JavaScript APIDocs
@angular/youtube-playerAngular component built on top of the YouTube Player APIDocs

Quick links

Documentation, demos, and guides | Frequently Asked Questions | Community Google group | Contributing | StackBlitz Template

Getting started

See our Getting Started Guide if you're building your first project with Angular Material.

Contributing

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

What we're working on now (Q2 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 payoff with the following benefits:

  • Dramatically improve consistency with the Material Design spec, which has changed significantly since Angular Material's 2016 inception.
  • 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 on-going basis (both the Angular team and the Material Design team).
  • Continue work on virtual-scroll support for cdk/table.
  • Accessibility - we'll be doing a major pass on outstanding accessibility issues and reviewing all

of the components for accessibility best practices such as WCAG.

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 IE11 / Edge.

We aim for great user experience with the following screen readers:

  • Windows: NVDA and JAWS with IE11 / FF / Chrome.
  • macOS: VoiceOver with Safari / Chrome.
  • iOS: VoiceOver with Safari
  • Android: Android Accessibility Suite (formerly TalkBack) with Chrome.
  • Chrome OS: ChromeVox with Chrome.
🔎Explore Package🔎CDN Script

Score

Popularity64/100
Quality76/100
Maintenance67/100

Dependencies