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.

Matching moments

Discovering CDK community events and resources
02:31 MIN

Discovering CDK community events and resources

Program your infrastructure with CDK and TypeScript

Key Angular features for building robust applications
07:34 MIN

Key Angular features for building robust applications

Differential Loading

Understanding the core concepts of the Angular framework
01:16 MIN

Understanding the core concepts of the Angular framework

Angular Unleashed: Mastering Modern Web Development with Angular

The CDK ecosystem extends beyond just AWS
01:24 MIN

The CDK ecosystem extends beyond just AWS

Stop configuring infrastructure, start coding it!

Using CDK constructs for high-level abstractions
02:14 MIN

Using CDK constructs for high-level abstractions

Program your infrastructure with CDK and TypeScript

Introducing the Angular.love developer community
00:36 MIN

Introducing the Angular.love developer community

Community Interview: angular.love

Resources for learning and using CDK
04:00 MIN

Resources for learning and using CDK

Stop configuring infrastructure, start coding it!

Using web components to abstract framework details
04:47 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 Features You Should be Using
36:22

Angular Features You Should be Using

Sani Yusuf

Angular Magical directives
29:11

Angular Magical directives

Valentine Awe

The Microfrontend Revolution- Using Webpack 5 Module Federation with Angular
33:18

The Microfrontend Revolution- Using Webpack 5 Module Federation with Angular

Manfred Steyer

State of Angular
41:34

State of Angular

Jessica Janiuk

Extending HTML with Web Components
41:54

Extending HTML with Web Components

Rowdy Rabouw

Angular tips/tricks you can use from tomorrow on
50:28

Angular tips/tricks you can use from tomorrow on

Benedikt Starzengruber

Angular Unleashed: Mastering Modern Web Development with Angular
58:56

Angular Unleashed: Mastering Modern Web Development with Angular

Indu Chaube

The Illusion of a Performant Web Application
28:56

The Illusion of a Performant Web Application

Cathrin Möller

Related Articles

View all articles
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!
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
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.

Frontend Developer

Frontend Developer

JO Media Software Solutions GmBh
Brunn am Gebirge, Austria

Senior
CSS
Angular
JavaScript
TypeScript