Sharing Top Content from the Angular-sphere.

Hidden features of Angular Material CDK – Simon Bernard – Medium

Hidden features of Angular Material CDK – Simon Bernard

  • More than just providing ready-to-use UI components, Angular Material comes with a CDK of reusable classes and non-UI behaviors (such as Overlays, Tables, Accessibility and much more).
  • There are 2 key benefits to this: – Separation of concerns: You can now develop your features using Material CDK without being bothered by UI constraints along the way.Low-imprint UI library: You will not have to apply the Material UI components anymore to use the features provided.
  • I initially wanted to reverse engineer it to understand how the Material team did it, and I was (happily) surprised to find that the component extended the CdkAccordionItem class from the CDK.
  • Since we want a very simple feature for now, we will only make our component extend the CDK and tap into its magic.
  • Our component is now able to use the toggle feature from the CDK directly without any extra code — the toggleAccordion() method is not even necessary since we can use toggle() directly.

You are probably familiar with Angular Material, which is the implementation of Material Design components for Angular. Now that version 6 is almost out, I think it is time to talk a bit more about…

More than just providing ready-to-use UI components, Angular Material comes with a CDK of reusable classes and non-UI behaviors (such as Overlays, Tables, Accessibility and much more). These tools are well documented and easy to use, and they are actually only the tip of the iceberg! Behind the scenes, Material components are using the CDK extensively as most of behaviours are now moved (or being moved) to the CDK, and the components are left to deal with only the UI. There are 2 key benefits to this:

Separation of concerns: You can now develop your features using Material CDK without being bothered by UI constraints along the way.Low-imprint UI library: You will not have to apply the Material UI components anymore to use the features provided. This means no more endless CSS overriding!CDK features are not all documented yet, but most of them are well commented and pretty easy to use. I will take the example of the toggle slide used for the Expansion Panel component. I initially wanted to reverse engineer it to understand how the Material team did it, and I was (happily) surprised to find that the component extended the CdkAccordionItem class from the CDK. It comes with all the methods needed to toggle the display of any component. It also offers a good example on how to animate the toggle feature.

Let’s dive into the code !

First, let’s have a glance at the CdkAccordionItem definition. It can’t hurt to get…

Hidden features of Angular Material CDK – Simon Bernard – Medium