How can I use Angular Material density?

Question

Material has created a density component modifier (Links here and here).

I've imported material/density and followed the suggested code in my scss file:

@use "@material/button";

.my-custom-button {
  // Sets button density scale to `-3`, i.e. button height to `24px`.
  @include button.density(-3);
}

but get errors about not finding the stylesheet. I've scored the web and found no solution to this problem.

Rina

The question is that if this feature was also implemented in angular material components. A quick skim through the github issues list shows that it is not yet adressed. github.com/angular/components/issues/4597 – Rat

@OctavianMărculescu you can use material without angular material you know. – Ectomorph

As for the OP, can you provide a minimal reproducible example ? – Ectomorph

@Ectomorph he's asking specifically for angular material.... – Rat

He just added the tag angular material (which might be an error). The links provided point to material design. Have you opened them ? – Ectomorph

Yes I opened them. angular material is in the tag and in the title. The OP showed us what feature he wants to use with angular material. I looked around and noticed that those features cannot be used (yet) with angular material. I did not contest the fact that there might be other ways of doing it. – Rat

@OctavianMărculescu I'm using angular material. The material links were for reference since I couldn't fully find it done with angular material and was wondering how I could do it in angular. – Rina

@Ectomorph I am utilizing angular material components, specifically a dropdown. I'm not sure how helpful it would be to replicate that generic of code. I can link you to the angular component examples if that is helpful. material.angular.io/components/input/overview – Rina

Answer 1

With Angular 15 there is this guide https://material.angular.io/guide/theming#customizing-density so top of scss file you add use

@use '@angular/material' as mat;`

then add

.my-custom-button {
  @include mat.button-density(-2);
}

I noticed that I needed to add that class to upper level element not to button itself. It might be some css selector problem. So make css selector strong enough.

Quinidine

It's the way density works for every Material component (although it's not specified anywhere), sadly Material v15 is a mess and the users are forced to do such workarounds. – Varnish

Do you mean that you want density all components as once. If that is case then you can set density to mat.define-dark-theme( as mentioned in documentation here material.angular.io/guide/theming#customizing-density . Here is one github issue related to density. github.com/angular/components/issues/… – Quinidine

And also if you are not using theming that way like in documentation you can use this @include mat.all-component-densities(-2) – Quinidine