search
Update time

Angular Material: New Component Dev Kit & initial version of data-table

Gabriela Motroc
Angular Material

© Shutterstock / Sinart Creative

It’s been six months since the last update — it’s time to see what’s cooking in the Angular Material kitchen. The first beta release of the Angular CDK is now available on npm and the data-table is making its debut.

Angular Material recap

The goal of Angular Material 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,” according to the GitHub repo.

What do they 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.

To see the progress, planned, and non-planned features, the available features and the status of the project, head on over to the GitHub repo

Status update

In March 2016, we got a sneak peek into the Angular Material components. Nine months later, the team released the beta version which included 22 UI components written for the latest Angular and provided support for accessibility, custom themes, and RTL text.

So what’s new? In short, Component Dev Kit and the initial version of the data-table component with Angular Material beta 8.

Component Dev Kit

An important goal of Angular Material has been “crafting a general, reusable foundation upon which components can be built.” According to the blog post announcing the update, the team has now reached the point where they want to start sharing this foundation with everyone as a standalone package: the Angular CDK.

With the CDK, developers have more tools to build components for the web. It will come in handy for projects which want to take advantage of the features of Angular Material without adopting the Material Design visual language. As of July 6, the first beta release of the CDK is available on npm as @angular/cdk. This release consists of features pertaining to accessibility, text directionality, platform detection, and dynamic component instantiation.

Not to worry — additional code will be moved from Angular Material into CDK with subsequent releases.

SEE ALSO: Angular: One framework

Data-table

It’s here, it’s here! The most requested feature for Angular Material is making its debut. Two table implementations [<md-table> as part of @angular/material, and <cdk-table> as part of @angular/cdk] have been released. The styled implementation of their Material Design <md-table> is based on the functionality provided by the <cdk-table> component from the new CDK.”

The <cdk-table> is an unopinionated, customizable data-table with a fully templated API, dynamic columns, and an accessible DOM structure. This component acts as the core upon which anyone can build their own tailored data-table experience,” according to the update. “@angular/material also builds on the data-table functionality, offering <md-paginator> and mdSort directives. These directives provide a UI for pagination and sorting in-line with the Material Design guidelines without being tightly coupled to the data-table itself.”

For more information on how to get started with the data-table, see the guide

What’s next for Angular Material

GitHub Pulse Angular Material

High-level stuff planned for Q3 2017 (July – September):

  • As many bug fixes as humanly possible
  • Additional features for data-table
  • Continued accessibility improvements
  • Nested menus
  • All components are OnPush
  • Improved documentation, guides, examples, and navigation on material.angular.io
  • Improve library-wide API consistency
  • Stepper component
  • Sticky header helper
  • action-list and selection-list

Watch the development of upcoming features on Angular Material’s GitHub Pulse.

asap

asap

Author
Gabriela Motroc
Gabriela Motroc is an online editor for JAXenter.com. Before working at S&S Media she studied International Communication Management at The Hague University of Applied Sciences.

Comments
comments powered by Disqus