WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
World Congress 2021 • Jul 1, 2021

Angular <> Angular CDK - Awesomeness Combined

Muhammad Ahsan Ayaz

Stop fighting opinionated UI libraries. Angular CDK's headless architecture gives you battle-tested behaviors out of the box, letting you build custom interfaces without the boilerplate.

Pause
Mute Enter Fullscreen
#1 about 5 min

Overview of the Angular development platform

The core capabilities, tools, and libraries that make up the Angular ecosystem for building scalable web applications.

#2 about 5 min

Balancing functionality and custom styling in UI development

Why predefined UI frameworks can complicate custom design requirements and when unstyled components become necessary.

#3 about 5 min

Simplifying custom component development with Angular CDK

How the Component Dev Kit separates behavior from presentation to solve complex UI challenges like positioning and accessibility.

#4 about 1 min

Installing and configuring Angular CDK via schematics

Provisioning the component dev kit and default configuration into an existing workspace utilizing the command-line interface.

#5 about 6 min

Accelerating DOM rendering with virtual scroll

Preventing browser lag when rendering thousands of items by only calculating and displaying the visible viewport.

#6 about 3 min

Building native drag and drop experiences

Using the CDK API to easily implement file movement and reordering with rich visual previews.

#7 about 3 min

Implementing keyboard accessibility with the list key manager

Binding keyboard navigation to lists to ensure items stay focused in the viewport as users scroll.

#8 about 4 min

Managing sequential UI flows using the CDK stepper

Splitting complex interaction processes into manageable steps with baked-in validation and state tracking.

#9 about 4 min

Managing dynamic component positioning with CDK overlays

Creating drop-downs and popovers that automatically adjust their position based on available viewport space.

#10 about 4 min

Recommended learning resources and audience Q&A session

Audience questions cover defining item sizes for responsive lists and finding learning materials for Angular.

Matching moments

3:24 min

Introduction to building reusable Angular components

Valentine Awe · WWC 2022

8:34 min

Exploring Angular component patterns and upcoming framework updates

Benedikt Starzengruber · LIVE

1:13 min

Core principles of the Angular framework

Jessica Janiuk · JS Congress

2:39 min

Angular framework benefits and technical career backgrounds

Marko Stanimirović · LIVE

1:15 min

Overview of the Angular application framework

Indu Chaube · LIVE

1:20 min

Exploring tooling choices for interactive UI components

Aurora Scharff Aurora Scharff · WWC 2025

More from World Congress 2021

Micro Frontends with Module Federation: Why and How? thumbnail
45:40
almost 5 years ago

Micro Frontends with Module Federation: Why and How?

Manfred Steyer

Data Science on Software Data thumbnail
48:10
about 5 years ago

Data Science on Software Data

Markus Harrer

The journey from developer to devops - what i've learnt along the way thumbnail
42:44
about 5 years ago

The journey from developer to devops - what i've learnt along the way

Liam Hurrel, Alireza Chegini

How Data is Shaping our Games thumbnail
43:30
about 5 years ago

How Data is Shaping our Games

Johanna Pirker

Cross platform Augmented Reality development with React Native thumbnail
40:50
about 5 years ago

Cross platform Augmented Reality development with React Native

Vladimir Novick

How to Build a Monetization Strategy Based on User's in-app Behavior thumbnail
38:59
about 5 years ago

How to Build a Monetization Strategy Based on User's in-app Behavior

Natalie Sieradzki

Upcoming sessions on this topic

Open session

World Congress 2026 North America

Architecting AI in Angular: WebMCP, A2UI, and the Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood
Open session

World Congress 2026 North America

Beyond Vibe Coding: An AI Builder’s Guide to Migrating 10k+ React Components

Shubham Chaurasia

Senior Software Engineer @ Meta

Shubham Chaurasia
Open session

World Congress 2026 North America

Beyond the Code: Human-AI Synergies in Product Development

Ajita Kanchivakam Ananth

Staff Technical Program Manager at Google

Ajita Kanchivakam Ananth
Open session

World Congress 2026 North America

Agentic Drift: keeping pace with your agents

John Coghlan

Senior Director, Developer Advocacy at GitLab

John Coghlan
Open session

World Congress 2026 North America

Small LLM in your Browser: Huge Opportunities for Web Applications

Daniel Ostrovsky

UI/UX Architect at Payoneer | AI Architect | Full Cycle Development Expert | Public Speaker | Open Source Contributor |

Daniel Ostrovsky
Open session

World Congress 2026 North America

Ship 10x Faster: AI-Powered Development with Claude Code and MCP Tools

Viktoria Semaan

Principal Technical Evangelist at Databricks

Viktoria Semaan

Related videos

Angular Unleashed: Mastering Modern Web Development with Angular thumbnail
58:56
LIVE • almost 3 years ago

Angular Unleashed: Mastering Modern Web Development with Angular

Indu Chaube

Angular tips/tricks you can use from tomorrow on thumbnail
50:28
LIVE • over 4 years ago

Angular tips/tricks you can use from tomorrow on

Benedikt Starzengruber

Angular Magical directives thumbnail
29:11
WWC 2022 • about 4 years ago

Angular Magical directives

Valentine Awe

Angular Features You Should be Using thumbnail
36:22
WWC 2021 • about 5 years ago

Angular Features You Should be Using

Sani Yusuf

State of Angular thumbnail
41:34
JS Congress • over 4 years ago

State of Angular

Jessica Janiuk

Sustainable Angular Architectures with Nx and Strategic Design thumbnail
50:57
LIVE • about 6 years ago

Sustainable Angular Architectures with Nx and Strategic Design

Manfred Steyer

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.