Video details

Take your Angular Material components prettier and accessible| Emma Twersky | EnterpriseNG 2021


Did you know that in the most recent release, Angular Material has undergone a sweeping review of accessibility and more intuitive theming, and the tagline is more accurate than ever!?
In this talk, you’ll learn:
What exactly has changed in the newest release of Angular Material How to take advantage of the latest updates The latest “best practices” when designing custom themes And more! Upon completion of this session, you’ll have the tools and knowledge you need to take advantage of the latest advancements for better theme development. ng-conf is a three-day Angular conference focused on delivering the highest quality training in the Angular JavaScript framework. 1500+ developers from across the globe converge on Salt Lake City, UT every year to attend talks and workshops by the Angular team and community experts.
Follow us on twitter Official Website: Join the Angular Community: Get your ng-conf tickets: Follow Us: Learn More: https://ng-conf-school.teachable
Read More:
Hear More:


Hey there, I'm Joe Williams. Before we get into the video, I want to remind you about Ng Cough happening on August 31 in person. So head over to to check out the speakers, check out the talks, and get your ticket. It's time to get it back together. This is going to have to do. All right, so the last two years haven't exactly felt the most beautiful, but we all want to build beautiful applications, so let's dive into some new changes in angular material that make that possible. Hi, everyone. My name is Emma Turski, and I'm a developer relations engineer on the Angular team at Google. The documents tagline for Angular Material is accessible and versatile components. In the most recent releases, Angular Material has undergone a sweeping review of accessibility and more intuitive theming, and that tagline is more accurate than ever. Let's spend the next ten to 15 minutes taking a deeper look at what exactly has changed, how to take advantage of those latest changes and best practices for theming, as well as where things are headed next. Since 2020, the Angular component repository has merged over 40 PRS tagged with Accessibility or Alf, and why. So what's in those PRS? This began with a comprehensive review of our components for Web accessibility standards, which were then implemented and launched as a part of version 13. There are too many improvements to show, but let's take a look at two enhancements I'm specifically excited about that significantly improved accessibility of Angular Material previously auto focus in your Dialogues side navigation and bottom sheets was a Boolean value that allowed users to specify whether the container element or first tabable element is focused on Open. That's a great start, but there are many instances where we want to focus on something else, like a dialogue header or different element. Plus, the blaming thing is a little bit confusing, since we were always going to auto focus on an element, we just wanted an option to specify which one. Now we have an expanded set of accepted values so that you can always specify using a CSS selector to focus on the first element that matches that, or choose something like the first header element. If none of those elements can be focused, then the container element is focused by default. Another improvement is a set of updates to the visual contrast, including special attention to the component's appearance in High Contrast mode. High Contrast Mode on Windows is an accessibility feature designed to increase text legibility and improve readability. The feature works by enabling the user to select theme colors for a scoped number of semantic elements. While it's not explicitly a part of Wakag requirements or any sort of web accessibility musthaves for the Web, it represents our team's commitment towards making components as accessible as possible. For more improvements and to see a comprehensive rundown of all of the changes, you can check out a blog post I wrote on the angular Blog if you're interested in learning more about accessibility and components, you can also check out the newly revised documentation on each of the components page, including an accessibility section that calls out these changes and how to implement them per component. You can also take the Accessibility and Angular Code Lab on Google Code Labs. The migration to integrating MDC website is currently in progress on the Angular roadmap and incorporates reusable primitives for building material design components to align more closely with the material design specifications. This upgrade to newer specs includes a range of built in accessibility improvements without us having to change anything specific to the Angular library code base. The MDC migration includes specs with things like higher contrast ratios for colors, better contrast on things like disabled options, and larger touch targets on things like checkboxes and buttons. In quarter four, the team is continuing to prioritize accessibility work with some of the trickier components like date Picker, which I can definitely say is a bit of a picky component. Now that we've talked about accessibility, let's look at versatility. We want to make sure that developers like yourself can use components to fit your unique business needs by providing a flexible foundation, whether that means creating CDK primitives or fully functional components. One area of flexibility I'm excited about is how we style our components. Version twelve introduced the option to use inline SAS in your angular components. The CLI now has an option to provide an inline style language and compile SAS directly from your components into styling. This provides a versatile way for developers to style your components, and it's helpful for those of you out there using single file components or those developers who just want to add a small amount of styling within a component file. Another change to styling is the migration from at import to Atuse in 2019, staff introduced a new module system, including the migration from import to use. By switching to use syntax, we can more easily determine what CSS is unused and reduce the size of compiled CSS output. This makes it impossible to inadvertently pull in transitive dependencies, and each module is only included once, no matter how many times the styles are loaded. Angular Material version 13 included a migration from import usage to use for all imports into the Angular Material SAS styles. This refactor of our Theming API surface is easier to understand and read and helps you as developers take better advantage of the new module system. This migration all takes place in scripts included an Ng update, so no need to worry about how to actually make those changes. Just Ng update to version twelve and beyond. And let's take a look at one example of how this change impacts how we define angular material themes. We now make use of the introduction of namespace to define the core angular material import as Mat, then access variables such as the indigo palette by Mat indigo palette if you dig into the source code, we're also more intentional about what variables are forwarded for public access to guide users towards cleaner styles. Check out the newly rewritten Angular Material Theming documentation to see how you and this migration simplify your components. Speaking of custom theme, you may notice that those documents have gotten a lot of attention recently as we revise all of our Theming guides. But there's more coming to the space. Soon you can check out my blog post, The New State of CSS and Angular, for a sneak peek at how the deprecation of Ie eleven support enables the angular libraries to begin using CSS custom properties to expand customization in a future angular release. Angular materials migration to MDC based components is just the beginning. I'm super excited about how aligning with the latest versions of Material Three enables more accessible and versatile components, and I'm excited to bring you along with as we look towards the future of Material Three. I'd love to hear from you. If your Enterprise application is using customization and angular material, please reach out to our developer relations team as we ensure that we bring personalization and customization to the web in a way that you all can use. Thank you for spending time talking about the future of components with me, and I'll speak to you next time. Hi, I'm Joe Williams. Thanks for checking out this video from Enterprise Ng 2021. Online conferences were great, but it's time to get back in person, see your old friends, make some new ones, and take your career to the next level. Head over to to get your ticket. See you there.