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

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

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!

Understanding Angular's foundation and role at Google
00:38 MIN

Understanding Angular's foundation and role at Google

State of Angular

How Angular collaborates with other Google teams
02:40 MIN

How Angular collaborates with other Google teams

State of Angular

Understanding the power of CDK constructs
15:24 MIN

Understanding the power of CDK constructs

Stop configuring infrastructure, start coding it!

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

Angular Unleashed: Mastering Modern Web Development with Angular58:56

Angular Unleashed: Mastering Modern Web Development with Angular

Indu Chaube

Building Interactive Async UI with React 19 and Ariakit25:22

Building Interactive Async UI with React 19 and Ariakit

Aurora Scharff

Building a component library for modern challenges29:44

Building a component library for modern challenges

Filip Rakowski

Related Articles

View all articles
BR
Benjamin Ruschin
The HTML Elements That You’re Probably Over-Engineering
As frameworks have become more and more commonplace in the world of web development, so too has the over-engineering of features made possible by our humble old friend, HTML. The mental models that come with using state management in React, Vue and o...
The HTML Elements That You’re Probably Over-Engineering
CH
Chris Heilmann
Building a "shoutout" component in plain HTML/CSS/JavaScript
Every Wednesday we meet at noon to talk about a lot of tech news, tools and resources in something we call WeAreDevelopers Live . We go live on YouTube and afterwards we cut out short videos to post on social media. What we needed was an obvious “sho...
Building a "shoutout" component in plain HTML/CSS/JavaScript
S
SciChart
The Fastest JavaScript Charts - Built for React and Beyond
For most developers, browser charting works fine — until it doesn’t. Once you push beyond tens of thousands of points, add live streaming, or need advanced interactions, the story changes: frame drops, frozen dashboards, memory issues. That’s where S...
The Fastest JavaScript Charts - Built for React and Beyond

From learning to earning

Jobs that call for the skills explored in this talk.