{"id":1549,"date":"2023-09-29T05:00:00","date_gmt":"2023-09-29T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1549"},"modified":"2023-09-25T16:06:53","modified_gmt":"2023-09-25T23:06:53","slug":"using-the-cdk-listbox-for-custom-list-selection","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/using-the-cdk-listbox-for-custom-list-selection\/","title":{"rendered":"Using the CDK ListBox for custom list selection"},"content":{"rendered":"\n

The Angular CDK<\/a> is an important toolkit for building Angular applications. We’ve already covered how to display an overlay using the CDK<\/a>. Today, let’s create a custom list selection feature using CDK ListBox<\/a>.<\/p>\n\n\n\n

Often, HTML dropdowns are too basic to allow for meaningful customization of what gets rendered in the dropdown. This has led to the creation of several custom components, such as Material Select<\/a>.<\/p>\n\n\n\n

But what if you’re not using a library and still need to customize a list of items for your users? Something like this, for instance:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Implementing such a UI with HTML is not very difficult. The complexity of the task comes from getting all the expected behaviors for an accessible experience, such as keyboard interaction and focus management.<\/p>\n\n\n\n

This is where the cdkListbox<\/code> directive shines. Here’s an example:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

The few lines of code in this example add the following select-dropdown-like features to these basic HTML list items:<\/p>\n\n\n\n