Hidden features of Angular Material CDK

Toggle the display of content from any component

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 the Angular Material CDK.

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 to know the class our component will extend from a little better:

There are 3 handy public methods, toggle(), close() and open(), triggering the accordion functionality. The method names speak for themselves. We can also find 4 EventEmitters allowing us to hook into the accordion lifecycle: closed, opened, destroyed and expandedChange.

The rest of the class methods and attributes are part of the accordion feature engine and we don’t need to dive in any further to complete our feature. 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. The only thing missing here, is the UI behaviour. Remember that the CDK does not handle it, but it helps you in the process. To achieve this last step, we will once again rely on Material and use one of its built in animations and the related state name getter (matExpansionAnimation.bodyExpansion).

And the template:

That’s it, our component can now slide-toggle the hidden content with a smooth animation! You can now make your own animation to fit your app UI/UX, or trigger more than just a display of extra content.

There are tons of useful tools in the CDK that are available but not documented yet (or not sufficiently), but relatively easy to use. It goes from a toggle-slide feature as described to collections management or tree-structured data utilities. Happy tinkering!

You can follow me on Twitter @simonbernard90

Thanks @sebarero for your corrections and feedbacks.