What's new in Angular Material and the CDK in Angular v15
What's new in Angular Material and the CDK in Angular v15
Our team is excited to share a high-level overview of all the new features of Angular Material and the Component Dev Kit (CDK) in v15. From announcing new MDC-based components to range selection support, and density customization. Watch a demo on how to update and use these new components.
Learn more in the full MDC migration guide → https://material.angular.io/guide/mdc…
Speaker: Emma Twersky
Watch more from the Angular v15 Launch Event → https://goo.gle/Angularv15
Subscribe to Angular → https://goo.gle/Angular
Angular Twitter → https://twitter.com/angular
#Angular #Developer
Content
2.6 -> hi I'm Emma from the angular team I'm
6.299 -> excited to share everything new in
8.28 -> angular material and the cdk in version
10.86 -> 15. let's Dive In
13.679 -> let's start with the most exciting
15.66 -> update MDC is here
18.3 -> no not the message Distribution Center
20.939 -> Miami-Dade College or mitochondria
23.58 -> defense center
24.84 -> MDC stands for material design
27.32 -> components and like the mitochondria MDC
31.08 -> is the PowerHouse of our new components
33.96 -> the MDC refactor allowed our team to
37.2 -> rebuild angular material components on
39.36 -> top of a set of core Primitives and
41.76 -> reusable code owned all by the material
44.399 -> design core team
46.44 -> these components align to the latest
48.48 -> specifications and will enable us to
50.82 -> adopt material 3. once we finalize the
53.82 -> style tokens
55.62 -> MDC also includes a wide range of
58.379 -> accessibility improvements including
60.36 -> better contrast ratio increased touch
63 -> Target sizes and refined Aria semantics
67.32 -> for the most part the typescript apis
69.72 -> and component directive selectors are
71.76 -> identical to ensure you can upgrade
74.1 -> smoothly
75.54 -> and we've tested these on thousands of
78.24 -> Google projects in the wild to ensure we
80.82 -> can provide you migration schematics
83.939 -> to update we have provided the following
86.34 -> steps
87.42 -> first update to angular material B15
91.799 -> as part of this update a schematic will
94.259 -> run to automatically move your
96.299 -> application to use the Legacy Imports
98.52 -> containing the old component
100.079 -> implementations
101.64 -> this provides a quick path to v15 with
104.82 -> minimal changes
107.04 -> next run the migration tool
109.92 -> after updating to v15 you can run the
112.619 -> migration tool to switch from the Legacy
114.84 -> components to the new mdc-based ones
118.68 -> this command updates your typescript
121.399 -> Styles and templates to the new
124.14 -> implementations updating as much as it
126.84 -> can automatically
129 -> depending on the size and complexity of
131.459 -> your application you may want to migrate
133.739 -> a single component or a small group of
136.02 -> components at a time rather than all
138.599 -> components at once
140.64 -> you may also want to migrate your app
142.8 -> one module at a time instead of all
145.379 -> together
146.58 -> you can use both the old implementation
148.98 -> and new implementation in the same
151.319 -> application as long as they aren't used
153.72 -> in the same NG module
156 -> the script will prompt you for the
157.86 -> directory and components you want to
160.14 -> migrate
161.34 -> after migrating with the script check
163.5 -> for to-do's left by the migration tool
166.5 -> in situations where the migration tool
168.959 -> is not able to automatically update your
171.84 -> code it will attempt to add comments for
174.54 -> you to follow up manually
176.7 -> these to do comments follow a common
178.98 -> format so they can be easily identified
182.459 -> to search for all comments left by the
184.92 -> migration tool search for to do MDC
188.04 -> migration in your IDE
190.68 -> Ally verify your application
193.92 -> after running the migration and
195.959 -> addressing the to-do's verify that
198.3 -> everything is working correctly
200.64 -> run your tests and confirm that they
202.86 -> pass
203.76 -> it's possible that your tests depended
206.58 -> on internal Dom or async timing details
209.099 -> of the old component implementations and
211.98 -> may need to be updated
213.84 -> if you find you need to update some
215.819 -> tests consider using component harnesses
218.4 -> to make the tests more robust
221.22 -> component harnesses future proof tests
223.86 -> for future Dom changes and help ensure
226.56 -> upgrading to Future versions of our
228.599 -> library is seamless for your team and
231.78 -> Ours
233.819 -> run your application and verify that new
236.519 -> components look right
238.2 -> due to changes in internal Dom and CSS
240.78 -> the components you may need to tweak
243 -> some of your application styles
245.94 -> you can find a link to the detailed
248.22 -> migration guide and complete list of
250.08 -> changes in the v15 blog and description
252.959 -> box below MDC is built to take advantage
256.5 -> of modern web features like design
258.66 -> tokens and CSS variables
261.299 -> which allow us to more smoothly and
263.58 -> quickly update to the latest in material
266.34 -> web styling
268.02 -> I'm excited for what MDC unlocks for the
270.78 -> future
272.16 -> and while the team was busy delivering
274.139 -> MDC and those smooth migrations that's
277.08 -> not the only update in v15
279.84 -> we also resolved the fourth most upvoted
282.84 -> issue range selection support in the
285.479 -> slider
286.56 -> to get a range input use matte slider
289.199 -> start thumb and matte slider end Thumb
291.72 -> in your slider inputs
294.66 -> additionally all components now have an
297.72 -> API to customize density which resolved
300.96 -> another popular GitHub issue
303.6 -> you can now specify the default density
306.18 -> across all of your components just by
308.82 -> customizing your theme
310.44 -> okay that's a lot of love for angular
313.38 -> material components but what about the
315.78 -> cdk
317.34 -> the cdk also saw some exciting changes
321.3 -> the component dev kit offers a set of
324.24 -> behavior Primitives for building UI
326.46 -> components
328.38 -> in v15 we introduced another primitive
331.5 -> that you can customize for your use
333.9 -> cases the cdk list box
337.199 -> the angular cdk list box module provides
340.68 -> directives to help create custom list
343.38 -> box interactions based on the Wai Aria
347.28 -> list box pattern
349.919 -> by using angular cdk list box you get
353.22 -> all the expected behaviors for an
355.44 -> accessible experience including bitty
358.199 -> layout support
359.52 -> keyboard interaction and focus
362.1 -> management
363.539 -> all directives apply their Associated
366.12 -> Aria roles to their host element
368.759 -> wow v15 is definitely a Powerhouse for
372.72 -> angular material and the cdk
375.9 -> thank you for watching now go NG update
382.11 -> [Music]
387.259 -> thank you
Source: https://www.youtube.com/watch?v=XlPtyPb3Hmw