Customizing Angular Material just got easier in v18!

Summary

The script discusses the upcoming Angular Material 3 and its integration with Angular version 18, which simplifies component customization using CSS variables. It showcases a custom button styler and explains how to change properties like roundness, height, text size, and colors at a granular level without affecting other components. The video also covers the limitations of previous versions and the benefits of the new MDC-based components, including the use of design tokens as CSS variables for consistent styling across projects.

Takeaways

• 😀 Angular Material 3 in version 18 makes customizing components easier with the use of CSS variables.
• 🛠️ A custom button Styler is showcased to demonstrate the ability to adjust properties like roundness, height, text size, and colors at a granular level.
• 🔄 Changes made to CSS variables are scoped and do not affect other components unless intentionally scoped globally.
• 📚 Theming APIs in Angular Material previously offered limited customization options, mainly color, typography, and density.
• 🔧 Prior to Material 3, customization often involved deep-diving into CSS internals and manually overriding styles, which could break with updates.
• 🌐 CSS variables in Material 3 are tied to Material Design tokens, providing a consistent set of properties for design and engineering teams.
• 🔑 Each Material Design token is implemented as a CSS variable, allowing for easy identification and customization of component properties.
• 📝 Customizing a component involves setting the value of the specific design token, which can be scoped to a global or component level.
• 🎨 The video demonstrates creating a custom button Styler with sliders to adjust CSS variables in real-time for properties like border radius, height, and font size.
• 📈 The introduction of MDC-based components in Angular Material 15 led to a breaking change in CSS selectors, requiring developers to update their code and styles.
• 🔍 The video suggests a need for a comprehensive list of design tokens for easier customization without relying on style inspectors.

Q & A

What is the main topic of the video script?

The main topic of the video script is the customization of Angular Material 3 components using CSS variables in the upcoming Angular version 18.

What is a custom button Styler in the context of the video?

A custom button Styler is a tool created to showcase or test the customization of Angular Material 3 components, allowing users to adjust properties like roundness, height, text size, and colors using CSS variables.

How does the new Angular version 18 make customization of components easier?

Angular version 18 makes customization easier by utilizing CSS variables and design tokens, which can be scoped to specific components or levels, allowing granular control over component appearance.

What were the limitations of customizing Angular Material components in version 11?

In version 11, theming APIs provided limited customization options, mainly color, typography, and density, without specific settings to change properties like border radius.

What is the significance of design tokens in the context of Angular Material components?

Design tokens are material design properties with consistent names and values that can be referred to by all teams, implemented as CSS variables in Angular Material components, allowing for consistent and granular customization.

How can CSS variables help in maintaining consistency across different teams in a project?

CSS variables, as implemented from design tokens, provide a common set of style properties that can be used by engineering and design teams, ensuring consistency in the appearance and behavior of the application.

What is the problem with directly modifying the internal CSS of Angular Material components?

Directly modifying internal CSS can lead to maintenance issues, as changes in the component internals may require updates to the custom CSS, potentially breaking existing styles.

What is the MDC-based components refactor in Angular Material 15?

The MDC-based components refactor in Angular Material 15 is an internal change that introduced Material Design Components, which altered the CSS selectors and required developers to update their code to maintain their customizations.

How can the new customization approach in Angular Material 3 help with client-specific requirements?

The new approach allows developers to create custom classes or directives with scoped CSS variables, making it easier to accommodate client-specific requirements and project needs without global style impacts.

What will the video demonstrate in a future episode regarding custom theming?

The video will demonstrate how to implement a simple custom theme using CSS variables in a real project, showing an alternative to the Angular Material theming API for a simpler customization process.

What is the potential issue with relying on style inspectors to find design tokens for customization?

Relying on style inspectors can be inefficient and may lead to inconsistencies, as developers would prefer a comprehensive list of design tokens for each component to streamline the customization process.

Outlines

00:00

🛠️ Customizing Angular Material with CSS Variables

The script introduces the ease of customizing Angular Material 3 components with the upcoming Angular version 18. The presenter demonstrates a custom button styler, showcasing how to adjust various properties like roundness, height, text size, and colors using CSS variables. This feature allows for granular customization at different levels, from global to component-specific, without affecting other components. The presenter also discusses the limitations of previous versions, where customization required deep CSS manipulation, which was prone to breaking with internal changes in component structure.

05:01

🔄 Transitioning from Prem MDC to MDC-based Components

This paragraph delves into the challenges faced by developers when customizing Angular Material components in version 11 and the transition to MDC-based components in version 15. The presenter explains how theming APIs were insufficient for detailed customization, leading to workarounds like using different components or deep CSS manipulation. The latter approach, however, resulted in extensive code changes when Angular Material underwent internal refactoring. The paragraph highlights the introduction of CSS variables in MDC-based components, which represent Material Design tokens and offer a more stable and customizable approach to theming.

10:01

🎨 Implementing Design Tokens for Component Customization

The final paragraph focuses on the practical implementation of design tokens as CSS variables in Angular Material 3. The presenter explains how to identify and modify these variables to customize component properties, such as border radius, height, and text size. A demonstration of creating a custom button styler is provided, illustrating how to bind CSS variables to component properties using Angular's host binding. The benefits of this approach include scoped customization and the assurance of stable design token names, with the Angular Material team committing to provide migrations for any future changes. The presenter also hints at future content on using custom theming with CSS variables, simplifying the process beyond the theming API.

Keywords

💡Angular Material

Angular Material is a UI component library for Angular applications, providing a wide range of pre-built components that follow Material Design guidelines. In the video, the speaker discusses the evolution of Angular Material and its impact on customizing UI components, particularly with the release of Angular version 18.

💡Customization

Customization refers to the process of adapting or modifying a product or component to meet specific needs or preferences. The video focuses on how Angular Material 3 and the upcoming version 18 have made it easier for developers to customize the appearance and behavior of Material components using CSS variables and design tokens.

💡CSS Variables

CSS Variables, also known as custom properties, are a feature in CSS that allows for the creation of variables to store values that can be reused throughout the stylesheet. In the context of the video, CSS variables are used to customize the properties of Angular Material components, such as border radius, height, and text size.

💡Design Tokens

Design tokens are a set of design-agnostic, system-wide values that can be used to ensure consistency in design and development. In the video, the speaker explains how Angular Material 3 implements design tokens as CSS variables, enabling developers to easily customize component styles across an application.

💡Theming APIs

Theming APIs in Angular Material are used to apply a consistent theme to an application, including primary, accent, and warn colors, typography, and density. The video script mentions that while Theming APIs are powerful, they were previously limited in terms of the customization options they provided for individual component properties.

💡MDC-based Components

MDC stands for Material Design Components, which is a project by Google that implements Material Design in various programming languages, including Angular. The video discusses the transition to MDC-based components in Angular Material 15, which changed the internal structure of components and required developers to update their custom styles.

💡Component Scoping

Component scoping refers to the practice of limiting the scope of certain styles or behaviors to specific components within an application. The video demonstrates how changes made to CSS variables in Angular Material can be scoped to individual components, preventing style changes from affecting other components.

💡Material Design Tokens

Material Design Tokens are the specific values used in Material Design to maintain consistency in visual properties like color, typography, and shape. In the video, the speaker explains that these tokens are implemented as CSS variables in Angular Material 3, allowing for a more granular level of customization.

💡Host Binding

Host binding in Angular is a feature that allows for binding values directly to the host element of a component. In the video, the speaker uses host binding to associate the values of CSS variables with the properties of the Material components, demonstrating how to apply custom styles at the component level.

💡Custom Button Styler

The Custom Button Styler mentioned in the video is a tool or feature created by the speaker to showcase and test the customization capabilities of Angular Material components. It allows for adjusting properties like roundness, height, text size, and colors using sliders, with the changes being applied in real-time to the components.

💡Granular Customization

Granular customization refers to the ability to make very specific and detailed adjustments to a component or system. The video emphasizes the new level of granular customization available in Angular Material 3 and version 18, where developers can change nearly every property of a component using design tokens and CSS variables.

Highlights

Customizing Angular Material 3 components has become easier with the upcoming release of Angular version 18.

A custom button Styler showcases the ability to create and test custom styles for Angular Material components.

Four identical components with sliders demonstrate the customization of roundness, height, text size, and colors using CSS variables.

Changes made to components can be scoped to specific levels, avoiding unwanted propagation of styles.

Customization at a granular level allows for client-specific or project-specific requirements to be met.

Theming APIs in Angular Material previously offered limited customization options for component appearance.

Using different components or deep CSS inspection were common workarounds for customization before Angular Material 3.

Internal refactoring in Angular Material 15 with MDC-based components broke existing CSS overrides, requiring developers to update their code.

CSS variables in Angular Material 3 are tied to Material Design tokens, providing a consistent set of properties for customization.

Design tokens are a common set of properties used for communication between engineering and design teams in large projects.

Custom button Styler allows for real-time changes to component properties by manipulating CSS variables.

Host binding in Angular provides a way to bind signal values to CSS variables for component-specific style changes.

Custom styles can be encapsulated within classes or directives for easier application to material components.

Angular Material 3's design tokens cover a wide range of properties, enabling granular customization for every component.

The color theming API can be supplemented with custom theming using CSS variables for more personalized component appearances.

The Angular Material team has committed to maintaining the consistency of design token names, ensuring stability for developers.

A future video will delve into custom theming with CSS variables, showcasing a real project implementation.

Transcripts

so customizing angular material 3

components has just got a lot easier or

it's about to become a lot easier with

the new angular version 18 due to be

released sometime this month and as you

can see you can actually create pretty

cool stuff like this custom button

Styler that I created recently to show

case or test this out and you can see

that I have four identical components

here each have some sliders and uh then

they have also a button which we are

actually changing and then you can

change the roundness you can change the

height and you can change the text size

according to your needs even the colors

of the button all by using the powers of

the CSS variables and the cool thing

about this is that you can actually

scope these changes to specific

components or at any level that you want

so for example these are four components

and the change that I make here to the

component is not going to flow here I

can make another change here I can

change the color here and you can see

that the changes that I'm making are all

scoped to this specific compon component

similar for other components here so

this is really cool because this allows

us to customize the components at a

really granular level according to our

needs according to sometimes client

requirements or even you know just

further requirements of the project that

we want so what has changed exactly

let's go through this now if you're a

longtime material user you would know

how difficult it is to actually change

anything or customize uh the appearance

of your material components so if you go

in the angular material official

documentation site and I switch over to

version 11 which which is Prem MDC

components one you can see that we have

a basic set of buttons but what if you

want to change the appearance of these

buttons well we could try out three

different things so the first thing we

we could try out would be to actually

try out the theming apis maybe the

theming apis of angular material provid

such a facility or such a feature to

change these appearance let's say we

want to change the Border radius of the

components maybe we want to make it more

squarish or we want to make it more

rounded so the first step would be maybe

we want to use a theming apis but the

problem is the theming apis only provide

us three properties that we can change

so one is the color you can have the

primary accident wand color and you have

to give a material plate to the colors

so that we can use those colors then we

have typography which we can change the

font and then we have density so that is

how things are Clos and far apart in the

components themselves we don't have any

specific setting to actually change the

Border radius or you know change some

specific property of the that we want so

then the second thing we could do would

be to uh maybe use a different component

and that's what I have done a lot of

times in my project so for example if I

need a smaller button you know some I I

have space for just a small button in my

UI and I don't want to use this this big

button maybe I would go to the chips

section and I would look at the chips

and I would take these chips components

but of course the chips components are

meant to be used in a specific context

and they're not exactly like buttons so

maybe we don't want to use that so then

the third option which is the last

option that a lot of people a lot of

material devs they end up using till now

has been to actually let's go back to

the button to actually go deep into the

CSS and you can inspect the CSS here

like for example this raised when we

want to change this and we can go in the

internals of this and we can see that it

has a box Shadow it has a margin it has

a background color and you can see it

has a border radius here of four pixels

so basically we want to change this so

what we do here then is that we'll try

changing this let's say we make it 16

pixels and yeah I like this new rounded

shape maybe we want to change it in this

way so we change it to 16 pixels that

this works that means we can Target this

selector here the CSS selector and then

we can add this to our styles. SAS to

make it uh change globally if you want

to make it change locally we'll have to

sort of use NG deep maybe to actually

Target these internal CSS selectors so

again not very ideal and you'll see a

lot of code bases they have these

changes I myself have been using it

because simply there was no other way

now that's all and well and it works as

you can see but what's the problem now

the problem here is that when the

internals of the component changes we

would have to update our code as well

and that is exactly what happened when

the angular material team changed to the

angular material design components

Factor internal refactor so for example

if you go in the version of maybe 15 I

guess so angular material team

introduced the MDC based components in

angular material 15 and let's see in

going your components the same thing

button now you have the appearan is the

same you can see but when you inspect it

you're going to see that the internals

have changed so you can see now the name

of the CSS selector has changed Matt MDC

race button previously it was Matt race

button so you'll have to update all of

your code within that and it's going to

break all of the existing overrided

styles that you have been doing and that

is what happened personally with me as

well in a very complex project I had

sort of over overr different styles to

make it look the way that we wanted but

with the MDC change in angular version

15 a lot of things broke the appearance

went completely haywire and I had to

spend a lot of time to actually fix all

of the UI issues but thankfully with the

material three changes all of that is

behind us now so as you can see here

with the MDC based changes you would

notice that we have these variable

references here and these are basically

referring to CSS variables but what are

these CSS variables basically so it was

revealed these are basically material

design tokens and if you go on the

material design website the official

material design website you can see

there's a whole section on design tokens

and they have explained what the purpose

of a design token is so so the concept

is basically of a common set of

properties which has a key has a value

and this can be referred to between the

engine engineering and the design teams

of any big project and basically the

implementation of these tokens in

different platforms varies but the

tokens names and the values will remain

the same so there will be a common set

of styles that we can actually refer to

by all teams now obviously it's a larger

concept and this is obviously meant for

larger teams but for our case for the

angular material components these design

tokens have been implemented as CSS

variables so let's go back to our

material 3 demo here that we created and

you can see that we have a button here

so how do we find out which property we

actually want to change so we are going

to go in the developer tools as I showed

before and you're going to inspect this

button and when you look at this button

you are going to see that almost all of

the properties are now referring to a

CSS variable so we are going to inspect

that for example we want to change the

Border radius as we discussed before

when we look at the border radius we're

going to see that it refers to the

variable MD the protected button

container shape and you can see that the

value for this has been defined in the

HTML portion of the app that means it's

the most top level and uh it has a value

of 999 pixels let's try and change this

to see whether it changes the radius and

you can see that yes the radius changes

a bit and in fact the radius of all the

buttons change so how do we make this

custom Uh custom button Styler using

this so all we need to do to change now

the components at any level is to just

set the value of the specific design

token so here for example we are

changing it in the HTML portion so this

is basically going to be followed all

over the app so this is good for custom

changes but if for example you want to

restrict it to specific places even to a

specific component itself so let's look

at the code a bit for this button styler

and see how we can implement this so if

for example we go in our code here you

can see that our button config is here

and let's just split this up so that we

can actually see the mat demo alongside

this and you can see here that we have

the slider the roundness slider the

height slider it's a matte slider and

the text size slider so there are three

sliders and each of the sliders are

basically linked to the signals which

actually contain the value of the slider

at any time so we have three signals

here which we have declared we have

given them some initial value and then

all we have to do is that we want to

associate this CSS variable that CSS

variable for that property to this

signal value and this is the button that

is actually going to be changed so we

can actually change the style for this

button directly as well but let's first

see how we can change the style for this

whole component scope it within that

component so for example we can go in

our host binding here now the host

binding here is going to provide us a a

good way to actually bind the signal to

the CSS variable or the style binding so

let's add a style binding here now now

in our now in our developer tools we saw

that we wanted to override a specific

CSS variable so what was that and let's

copy that in and let's go to that here

and we can see that we have we have this

button let's see which one we want so we

want to overwrite this border radius and

let's just copy this value here so this

is basically the name of the CSS

variable that we want to update and

let's make this change here we are going

to say Style dot the CSS variable and

this is going to be assigned to the

roundness setting which is linked to the

roundness value here so we going to say

let's say we can also do it like this

roundness and we're also going to give

it pixels here great so let's see if

this works let's save this and now you

can and now we're going to try to change

the roundness so when we reduce the

roundness you can see that the roundness

changes here we make it maximum it goes

here so it's from 0 to 30 pixels we keep

this here and because it is scoped just

to the component we can see that this

roundness remains at 19 and when we

change this this can be made to made

zero and it's going to only affect this

button because this is contained within

this component the same thing with

others so nice and simple now if you

wanted to make it Global we could

actually give it in a Styles file the

style. SAS which is a global file or a

level above this specific component

similarly we are going to do the same

with the two or three variables that we

have the other variables that we have so

let's say we want to change the height

of this so let's see what the height is

and you can see the height is here MDC

protected button container height click

on this and we can actually copy this

like this let's change this here we need

another key here this is going to be

style and this this is going to be

height the signal value pixels and we

are going to make it another like this

okay so this should work as well let's

save this here and now we can test the

height and you can see that yes the

height changes here you can reduce the

height here you can change the height

here so pretty nice and the last one is

the text size so let's change the text

size here text size we are going to look

at the label itself and you can see the

color and you can see the font size so

MDC protected button label text size now

you can be rest assured that these

styles are not going to change these

design token names are not going to

change that frequently okay so the

angular material team has promised that

these design token names are going to

remain the same for the foreseeable

future and if they're going to be

changed slightly in the future there

will be migrations provided so that it

becomes easier for us to change it in

our code basis but again it would be

good if they provide a long list a

comprehensive list of all of the design

tokens available for each component so

that we don't have to go in our uh style

inspectors to get these but for now this

will have to do so if if you can go MDC

protected label text size I can copy

this here and let's now close this once

and for all and we're going to put this

here again let's say style Dot and this

is going to be text size and for these

we are going to keep it as RM cuz that

makes more sense okay so now when we

increase the text size you can see the

text size beautifully increases this is

a small button maybe you want a bigger

button so we have a bigger button here

with a less roundness and we have all of

our features that I just showed you

initially so of course probably you're

not going to be creating this button

Styler for uh your users but more likely

you would want to keep these custom

Styles in a sort of a custom class that

you would be using maybe you would be

creating a big button Class A small

button class and then you can

encapsulate these CSS variables or css

variable changes within that class and

then you apply it to wherever you need

you can also use directives to attach it

to your material components and you can

convert them to your own custom

components that way now this opens the

doors for a lot of different

customization possibilities now I've

only covered some three properties here

but you can see that there is a design

token basically for every property out

there baring very minor properties which

actually nobody cares about so this

opens a door for a lot of granular

customization in and the angular

material components now and you can now

accommodate your client requests

accommodate your project needs and you

can actually customize the material

components appearance according to your

own needs now this also includes

changing the color so customizing the

color now the color theming API is

provided by material but in a recent

project I discovered that I can also use

my own custom theming using these CSS

variables now I showed that initially

but I'm going to go into more detail in

the next video for that and I'm going to

show you a real project as well that I

did for a client in which I basically

implemented a simple custom theme of two

or three colors which was much simp

simpler than you know using the angular

material theming API so I hope you like

this video if you liked it please

subscribe uh and comment so that it will

reach more people thanks for watching

and I'll see you next time