Customizing Angular Material just got easier in v18!
Summary
TLDRThe 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
🛠️ 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.
🔄 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.
🎨 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.
Mindmap
Keywords
💡Angular Material
💡Customization
💡CSS Variables
💡Design Tokens
💡Theming APIs
💡MDC-based Components
💡Component Scoping
💡Material Design Tokens
💡Host Binding
💡Custom Button Styler
💡Granular Customization
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
Ver Más Videos Relacionados
5.0 / 5 (0 votes)