Muhammad Ahsan Ayaz

Angular <> Angular CDK - Awesomeness Combined

Need powerful UI features without the rigid styles of a component library? Learn how the Angular CDK gives you the best of both worlds.

Angular <> Angular CDK - Awesomeness Combined
#1about 5 minutes

Understanding Angular as a complete development platform

Angular is a comprehensive platform with a rich ecosystem of tools for building scalable web, mobile, and desktop applications.

#2about 5 minutes

The challenge of choosing a UI library

Using pre-built UI libraries like Bootstrap offers functionality but forces default styles, while building from scratch requires reinventing common components.

#3about 5 minutes

Getting started with the Angular CDK

The Angular CDK provides unstyled, accessible, and high-performance UI behaviors, allowing you to build custom component libraries without the boilerplate.

#4about 6 minutes

Optimizing large lists with virtual scrolling

Use the CDK's virtual scroll to render only the visible items in a list, significantly improving performance by reducing the number of DOM elements.

#5about 3 minutes

Implementing drag and drop for lists

The CDK's drag and drop module simplifies creating interactive lists where users can reorder items or move them between containers.

#6about 3 minutes

Adding keyboard navigation with ListKeyManager

Improve accessibility by using the ListKeyManager to easily add keyboard navigation and focus management to custom list components.

#7about 3 minutes

Building multi-step wizards with the stepper API

The CDK Stepper API allows you to break down complex forms or processes into a simple, guided, multi-step wizard experience.

#8about 5 minutes

Building dynamic popovers with the overlay API

The CDK Overlay API provides a powerful way to render floating panels like dialogs and tooltips with intelligent, dynamic positioning.

#9about 2 minutes

Handling responsive item sizes in virtual scroll

When using virtual scroll with responsive items, provide a consistent or maximum item size to ensure the CDK renders a sufficient buffer of elements.

Related jobs
Jobs that call for the skills explored in this talk.

test

Milly
Vienna, Austria

Intermediate

test

Milly
Vienna, Austria

Intermediate

Matching moments

Discovering CDK community events and resources
30:12 MIN

Discovering CDK community events and resources

Program your infrastructure with CDK and TypeScript

Key Angular features for building robust applications
04:56 MIN

Key Angular features for building robust applications

Differential Loading

Understanding the core concepts of the Angular framework
04:37 MIN

Understanding the core concepts of the Angular framework

Angular Unleashed: Mastering Modern Web Development with Angular

Using CDK constructs for high-level abstractions
10:58 MIN

Using CDK constructs for high-level abstractions

Program your infrastructure with CDK and TypeScript

The CDK ecosystem extends beyond just AWS
10:24 MIN

The CDK ecosystem extends beyond just AWS

Stop configuring infrastructure, start coding it!

Introducing the Angular.love developer community
00:17 MIN

Introducing the Angular.love developer community

Community Interview: angular.love

Resources for learning and using CDK
33:41 MIN

Resources for learning and using CDK

Stop configuring infrastructure, start coding it!

Using web components to abstract framework details
07:51 MIN

Using web components to abstract framework details

Advanced Micro Frontends: Multi-Version and Multi-Framework Scenarios

Featured Partners

Related Videos

See all videos
Angular Magical directives29:11

Angular Magical directives

Valentine Awe

Angular Features You Should be Using36:22

Angular Features You Should be Using

Sani Yusuf

State of Angular41:34

State of Angular

Jessica Janiuk

Extending HTML with Web Components41:54

Extending HTML with Web Components

Rowdy Rabouw

Angular tips/tricks you can use from tomorrow on50:28

Angular tips/tricks you can use from tomorrow on

Benedikt Starzengruber

Building Interactive Async UI with React 19 and Ariakit25:22

Building Interactive Async UI with React 19 and Ariakit

Aurora Scharff

Angular Unleashed: Mastering Modern Web Development with Angular58:56

Angular Unleashed: Mastering Modern Web Development with Angular

Indu Chaube

Building a component library for modern challenges29:44

Building a component library for modern challenges

Filip Rakowski

Related Articles

View all articles
CH
Chris Heilmann
All the videos of Halfstack London 2024!
Last month was Halfstack London, a conference about the web, JavaScript and half a dozen other things. We were there to deliver a talk, but also to record all the sessions and we're happy to share them with you. It took a bit as we had to wait for th...
All the videos of Halfstack London 2024!
AM
Ashutosh Mishra
16 Best Free React UI Libraries in 2025
Web development is moving incredibly fast. New features pop up all the time, but there's one constant issue that keeps coming up: keeping your app's interface looking attractive and impressive. While new features are born and killed as the project gr...
16 Best Free React UI Libraries in 2025
DC
Daniel Cranney
The State of HTML 2024: What can we learn from it?
The results of the State of HTML 2024 survey are in! Though the name suggests it’s HTML-only, the survey focuses on the web platform in a more general sense, giving us some fascinating insights into not only the state of the web, but also some sense ...
The State of HTML 2024: What can we learn from it?

From learning to earning

Jobs that call for the skills explored in this talk.