article: Updating to Angular Material 18 | Angular Material Dev

[giscus[bot]]

article: Updating to Angular Material 18 | Angular Material Dev

Learn Material Design in Angular, Theming Angular Material Components and Developing your Angular application with Material Design like a pro.

https://angular-material.dev/articles/updating-to-angular-material-18

[mattiLeBlanc]

Hi, thanks for this article, it was very helpful. I got a bit shocked when I thought to do a routine upgrade to A18, lol.
One thing I am not happy about is the loss of get-color-from-palette. I know it are just map.get convenience functions but I myself use it a lot because I want to add color into angular components based on the palettes we have defined. And there are more than the 3 that Mat offers.

So I had a look in the old Material Components and exacted the 2 missing functions:

@use "sass:map";

@function get-contrast-color-from-palette($palette, $hue) {
  @return map.get(map.get($palette, contrast), $hue);
}

@function get-color-from-palette($palette, $hue) {
  @if map.has-key($palette, $hue) {
    @return map.get($palette, $hue);
  }
  @error 'Hue "' + $hue + '" does not exist in palette. Available hues are: ' + map.keys($palette);
}

Maybe this can be handy for others?

[shhdharmen]

Thanks for sharing. I would say use official functions/mixins only. In that way you can easily update to latest versions in future.

[mattiLeBlanc]

@shhdharmen Actually, they removed get-color-from-palette so now you have to use get-from-theme but you always have to pas in the $theme variable and I may not want to included somewhere in a custom component where I just want to use a color.
Plus, we have more than 3 colours, we have a grayscale which is not part of the theme so you can't use the get-theme-color function for that.

You can use map.get() sass function but then this original get-color-from-palette which was part of Angular Mat 17 is nicer I think.

[shhdharmen]

We can use get-theme-color function in 2 ways:

1. Reading tonal palette colors - get-theme-color($theme, $palette, $hue), read more at https://material.angular.io/guide/theming-your-components#reading-values-from-a-theme
2. Reading color roles - get-theme-color($theme, $role), read more at https://material.angular.io/guide/theming-your-components#reading-color-roles

[shhdharmen]

If you want to know more about how palettes are constructed for Material 3 in Angular Material 18, I have launched a new course: Angular Material 3 Theming System: Complete Guide

[mattiLeBlanc]

Yes, but what if your colour palette is not part of your theme?
okay we have more palettes now in M3 than in M2:
primary, secondary, tertiary, error, neutral,neutral-variant

But I am still running a m2 theme (don't have time to upgrade atm) with 3 palettes and I have some text colours in a grayscale for which I used to use this get-color-from-palette function for which is now gone.

If you have a separate component, in which you want to apply a background colour from primary, hue 500, that component has no access to the $theme at /shared/components/some-component.ts.
I am reading Step 2: Use values from the theme but the last thing I want is to define my some-component styles in a mixin in a theme file. I want to keep the styles of this bundled with the component.

How do you go about this if you use get-theme-color?

[shhdharmen]

get-theme-color works even for M2, read more at: https://material.angular.io/guide/material-2-theming#reading-color-values.

But, if the palettes are not part of theme, then yes, you will have to use your own mechanism.

[GraceG7]

Hi, in Material 3, is it possible to get contrast of palette colours?

[GraceG7]

  --primary-darkest: #{mat.get-theme-color($light-theme, primary, 500)};
  --primary-contrast-darkest: #{mat.get-theme-color($light-theme, primary,
      500-contrast
    )};

It didn't seem like I could get a color contrast for specific hue though? For example the above is what i have in material 2 themes, it seems with the what you suggested is that I can have mat.get-theme-color($light-theme, 'on-primary') to get the contrast if I understood correctly? But with this I couldn't specify a hue.

Also just wondering if there is a grey pre defined theme in material similar to the grey theme in material 2?

Otherwise, how would I go about creating a customize palette?

[shhdharmen]

You can specify a hue, you just need to pass one more argument in get-theme-color, for example:

$primary40: mat.get-theme-color($theme, primary, 40)

You can use below schematic to generate an M3 compatible palette from any color:

ng generate @angular/material:m3-theme

[GraceG7]

I meant getting a contrast of a specific hue

[shhdharmen]

You can use color modules from sass.

[shhdharmen]

If you want to know more about how palettes are constructed for Material 3 in Angular Material 18, I have launched a new course: Angular Material 3 Theming System: Complete Guide