The definitive source of the best
JavaScript libraries, frameworks, and plugins.

  • ×

    Material Design components for Angular
    Filed under 

    • 🔾94%Overall
    • 17,494
    • 7 hours
    • 🕩4509
    • 👥19

    Material Design for Angular

    npm version Build status Gitter

    This is the home for the Angular team's Material Design components built for and with Angular.

    Documentation, demos, and guides | Google group | Contributing | Plunker Template | StackBlitz Template

    Getting started

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

    Check out our directory of design documents for more insight into our process.

    If you'd like to contribute, you must follow our contributing guidelines. You can look through the issues (which should be up-to-date on who is working on which features and which pieces are blocked) and make a comment. Also see our help wanted label.

    High level stuff planned for Q1 → Q2 2019 (January - June):

    • Most of the Angular Material team is on loan to the framework team helping with Ivy. We've been using the Angular CDK and Angular Material tests to validate code paths as well as helping debug issues in switching Google applications to the new rendering pipeline.
    • We're also working with the Material Design team on a strategy to collaborate more deeply. We'll have more to share on this once our plans are further along.
    • Assorted bugfixes and minor feature improvements.
    • Design for API enhancements to the tree component to improve ergonomics.

    Available features

    Feature Notes Docs
    autocomplete Docs
    badge Docs
    bottom-sheet Docs
    button Docs
    button-toggle Docs
    cards Docs
    checkbox Docs
    chips Docs
    data-table Docs
    datepicker Docs
    dialog Docs
    divider Docs
    drag-drop Docs
    expansion-panel Docs
    grid-list Docs
    icon Docs
    input Docs
    list Docs
    menu Docs
    paginator Docs
    progress-bar Docs
    progress-spinner Docs
    radio Docs
    ripples Docs
    select Docs
    sidenav Docs
    slide-toggle Docs
    slider Docs
    snackbar / toast Docs
    sort-header Docs
    stepper Docs
    tabs Docs
    textarea Docs
    toolbar Docs
    tooltip Docs
    tree Docs
    virtual-scroll Docs
    ---------------- ------------------------------------------------------ ------------
    theming Guide
    typography Guide
    layout See angular/flex-layout Wiki
    cdk Docs

    In progress, planned, and non-planned features

    Feature Status Docs Issue
    fab speed-dial Not started, not planned - #860
    fab toolbar Not started, not planned - -
    bottom-nav Not started, not planned - #408

    The goal of Angular Material

    Our goal is to build a set of high-quality UI components built with Angular and TypeScript, following the Material Design spec. These components will serve as an example of how to write Angular code following best practices.

    What do we mean by "high-quality"?

    • 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 devs.

    Browser and screen reader support

    Angular Material supports the most recent two versions of all major browsers: Chrome (including Android), Firefox, Safari (including iOS), and IE11 / Edge

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

    • NVDA and JAWS with IE / FF / Chrome (on Windows).
    • VoiceOver with Safari on iOS and Safari / Chrome on OSX.
    • TalkBack with Chrome on Android.
    Show All