Angular Material Theming System - Dimension: Density

Density

The mat.theme’s density value determines the spacing within components, such as how much padding is used around a button’s text or the height of form fields.

The density value accepts integers from 0 to -5, where 0 is the default spacing and -5 is the most dense and compact layout. Each whole number step down (-1, -2, etc.) reduces the affected sizes by 4px, down to the minimum size necessary for a component to render itself coherently.

The following example theme file has a density setting of -2 which causes most components to include less whitespace in their layout.

1
@use "@angular/material" as mat;
2

3
html {
4
  @include mat.theme(
5
    (
6
      density: -2,
7
    )
8
  );
9
}

Setting the density below 0 can reduce accessibility and make navigation harder for users of assistive technology.

Density customizations do not affect components that appear in task-based or pop-up contexts, such as the date picker. The Material Design density guidance explicitly discourages changes to density for such interactions because they don’t compete for space in the application’s layout.

Modifying Density

For our application, we will create density classes that will be used to modify the density of our application. Then we will modify ThemeChanger service to allow modifying classes based. And lastly we will implement a slider to modify the density of our application.

Density Classes

Let’s start by creating _density.scss file in the src/styles folder.

1
@use "@angular/material" as mat;
2

3
$density-list: (0, -1, -2, -3, -4, -5);
4

5
@each $density in $density-list {
6
  .density-#{$density} {
7
    @include mat.theme(
8
      (
9
        density: $density,
10
      )
11
    );
12
  }
13
}

Now we will import this file in our styles.scss file.

1
@use "./styles/density";

Changes in ThemeChanger

We will modify ThemeChanger service to allow modifying classes based on the density.

1
// content reduced for brevity, only additions, no deletions
2
const LOCAL_STORAGE_DENSITY_KEY = 'my-app-density';
3

4
@Injectable({ providedIn: 'root' })
5
export class ThemeChangerService {
6
  private _density = signal(0);
7
  public density = this._density.asReadonly();
8

9
  constructor() {
10
    this.setDensity(this.getPreferredDensity() ?? 0);
11

12
    effect(() => {
13
      const density = this._density();
14
      // Remove any existing density classes first
15
      this._document.body.classList.forEach((className) => {
16
        if (className.startsWith('density-')) {
17
          this._document.body.classList.remove(className);
18
        }
19
      });
20
      // Only add density class if density is not 0
21
      if (density !== 0) {
22
        this._document.body.classList.add(`density-${density}`);
23
      }
24
    });
25
  }
26

27
  private getPreferredDensity = () =>
28
    this.browserStorage.load<number>(LOCAL_STORAGE_DENSITY_KEY);
29
  private setStoredDensity = (density: number) => {
30
    this.browserStorage.save(LOCAL_STORAGE_DENSITY_KEY, density);
31
  };
32

33
  public setDensity = (density: number) => {
34
    this.setStoredDensity(density);
35
    this._density.set(density);
36
  };
37
}

Implementing a Slider

We will implement a slider to modify the density of our application.

ng generate component components/density-slider

1
<div class="density-slider-container">
2
  <button (click)="isOpen = !isOpen" type="button" mat-icon-button>
3
    <mat-icon>straighten</mat-icon>
4
  </button>
5
  <mat-card
6
    class="density-slider-card"
7
    [class.density-slider-card-open]="isOpen"
8
  >
9
    <mat-card-header>
10
      <mat-card-subtitle>Change Density</mat-card-subtitle>
11
    </mat-card-header>
12
    <mat-card-content>
13
      <mat-slider [max]="0" [min]="-5" [step]="1" discrete>
14
        <input matSliderThumb [(ngModel)]="density" />
15
      </mat-slider>
16
    </mat-card-content>
17
  </mat-card>
18
</div>

1
import { Component, effect, inject, signal } from '@angular/core';
2
import { FormsModule } from '@angular/forms';
3
import { MatButtonModule } from '@angular/material/button';
4
import { MatCardModule } from '@angular/material/card';
5
import { MatIconModule } from '@angular/material/icon';
6
import { MatSliderModule } from '@angular/material/slider';
7
import { ThemeChangerService } from '../../services/theme-changer.service';
8

9
@Component({
10
  selector: 'app-density-slider',
11
  imports: [
12
    MatCardModule,
13
    MatSliderModule,
14
    FormsModule,
15
    MatButtonModule,
16
    MatIconModule,
17
  ],
18
  templateUrl: './density-slider.component.html',
19
  styleUrl: './density-slider.component.scss',
20
})
21
export class DensitySliderComponent {
22
  isOpen = false;
23
  private themeChanger = inject(ThemeChangerService);
24
  density = signal(this.themeChanger.density());
25

26
  constructor() {
27
    effect(() => {
28
      this.themeChanger.setDensity(this.density());
29
    });
30
  }
31
}

1
.density-slider-container {
2
  position: relative;
3
}
4

5
.density-slider-card {
6
  position: absolute;
7
  top: 40px;
8
  right: 0;
9
  display: none;
10

11
  &-open {
12
    display: block;
13
  }
14
}

Using the Slider

Now we will import DensitySliderComponent in our AppComponent file and use it.

1
<mat-toolbar color="primary">
2
  <span>Todo App</span>
3
  <app-theme-toggle class="theme-toggle"></app-theme-toggle>
4
  <div class="toolbar-actions">
5
    <app-theme-toggle></app-theme-toggle>
6
    <app-density-slider></app-density-slider>
7
  </div>
8
</mat-toolbar>
9

10
<!-- rest remains the same -->

1
import { DensitySliderComponent } from './components/density-slider/density-slider.component';
2

3
@Component({
4
  // rest remains the same
5
  imports: [
6
    // other imports
7
    DensitySliderComponent,
8
  ],
9
})
10
export class AppComponent { /*...*/ }

1
.mat-toolbar {
2
  // rest remains the same
3

4
  .theme-toggle {
5
  .toolbar-actions {
6
    margin-left: auto;
7
    display: flex;
8
    gap: 0.25rem;
9
    align-items: center;
10
  }
11
}