Angular Material Theming System - Custom Component Styles

Creating a UI Library

Let’s start by creating a UI library. We will create a new Angular library project.

ng g lib @app/ui

Creating stats component

The stats component will be a simple component that displays a list of pending and completed tasks.

ng g c components/stats --project=@app/ui --style=scss

1
<div class="stats-container">
2
  @for (item of list; track item) {
3
  <div
4
    class="stats-item stats-item-{{ item }}"
5
    [class.done]="count()[item].done === count()[item].total"
6
  >
7
    <div class="stats-item-title">{{ item }}</div>
8
    <div class="stats-item-value">
9
      {{ count()[item].done }}
10
      <span class="stats-item-value-total">/ {{ count()[item].total }}</span>
11
    </div>
12
  </div>
13
  }
14
</div>

1
import { Component, input } from '@angular/core';
2

3
@Component({
4
  selector: 'lib-stats',
5
  imports: [],
6
  templateUrl: './stats.component.html',
7
  styleUrl: './stats.component.scss',
8
})
9
export class StatsComponent {
10
  readonly list = ['high', 'medium', 'low'];
11
  count = input<Record<string, { total: number; done: number }>>({
12
    high: { total: 0, done: 0 },
13
    medium: { total: 0, done: 0 },
14
    low: { total: 0, done: 0 },
15
  });
16
}

1
.stats-container {
2
    display: grid;
3
    overflow: hidden;
4
    grid-template-columns: repeat(1, 1fr);
5
    margin: 1rem;
6

7
    @media (min-width: 960px) {
8
      grid-template-columns: repeat(3, 1fr);
9
    }
10
}
11

12
.stats-item {
13
  padding: 8px 16px;
14

15
  &.done {
16
    opacity: 0.5;
17
  }
18
}

Exporting the component

1
export * from './lib/components/stats/stats.component';

Script for library

Add below scripts in root package.json file.

{
  "scripts": {
    "prebuild": "ng build --project=@app/ui",
    "watch:lib": "ng build @app/ui --watch --configuration development"
  }
}

Then run npm run watch:lib to start watching for changes and rebuilding the library.

Applying Angular Material styles

1
@use "sass:map";
2
@use "@angular/material" as mat;
3

4
.stats-container {
5
  display: grid;
6
  border-radius: var(--mat-sys-corner-medium);
7
  overflow: hidden;
8
  grid-template-columns: repeat(1, 1fr);
9
  margin: 1rem;
10
  box-shadow: var(--mat-sys-level1);
11

12
  @media (min-width: 960px) {
13
    grid-template-columns: repeat(3, 1fr);
14
  }
15
}
16

17
$priority-colors: (
18
  low: (
19
    background: var(--mat-sys-surface-container),
20
    foreground: var(--mat-sys-on-surface),
21
  ),
22
  medium: (
23
    background: var(--mat-sys-secondary-container),
24
    foreground: var(--mat-sys-on-secondary-container),
25
  ),
26
  high: (
27
    background: var(--mat-sys-error-container),
28
    foreground: var(--mat-sys-on-error-container),
29
  ),
30
);
31

32
.stats-item {
33
  padding: 8px 16px;
34
  &.done {
35
    opacity: 0.5;
36
  }
37
}
38

39
@each $priority, $colors in $priority-colors {
40
  .stats-item-#{$priority} {
41
    background-color: map.get($colors, background);
42
    color: map.get($colors, foreground);
43
  }
44
}
45

46
.stats-item-value {
47
  font: var(--mat-sys-headline-large);
48
  letter-spacing: var(--mat-sys-headline-large-tracking);
49
}
50

51
.stats-item-title {
52
  font: var(--mat-sys-title-medium);
53
  letter-spacing: var(--mat-sys-title-medium-tracking);
54
  margin-bottom: 12px;
55
}
56

57
.stats-item-value-total {
58
  font: var(--mat-sys-title-small);
59
  letter-spacing: var(--mat-sys-title-small-tracking);
60
}

Importing in app component

1
<main class="container">
2
  <lib-stats [count]="count()"></lib-stats>
3
  <app-todo-list></app-todo-list>
4
</main>

1
import { StatsComponent } from '@app/ui';
2

3
Component({
4
  // rest remains same
5
  imports: [
6
    // other imports,
7
    StatsComponent
8
  ]
9
})
10
export class AppComponent {
11
  count = computed(() =>
12
    this.todoService.todos().reduce(
13
      (acc, todo) => {
14
        acc[todo.priority] = acc[todo.priority] || { total: 0, done: 0 };
15
        acc[todo.priority].total++;
16
        acc[todo.priority].done += todo.completed ? 1 : 0;
17
        return acc;
18
      },
19
      {
20
        high: { total: 0, done: 0 },
21
        medium: { total: 0, done: 0 },
22
        low: { total: 0, done: 0 },
23
      }
24
    )
25
  );
26
}

Taking care of density

1. Create a new file `_stats.density.scss`

Create a new file at projects/app/ui/src/lib/components/stats/_stats.density.scss and add the density mixin.

1
@use "sass:map";
2

3
@mixin density($density) {
4
  $spacing: (-1: 6px 12px, -2: 4px 8px, -3: 4px 8px, -4: 4px 8px, -5: 4px 8px);
5
  $scale-spacing: map.get($spacing, $density);
6
  .stats-item {
7
    padding: $scale-spacing !important;
8
  }
9
}

2. Export the density mixin from `_index.scss`

Create a new barrel file at projects/app/ui/src/_index.scss and export the density mixin.

1
@forward "./lib/components/stats/stats.density" as stats-*;

3. (Optional) SASS entry in library’s `package.json`

This is needed only if you’re planning to publish your library. Add below in projects/app/ui/package.json:

{
  "exports": {
    ".": {
      "sass": "./_index.scss"
    }
  }
}

4. Include projects path in `angular.json`

This change will make sure that all the styles from projects directory are included in the build process.

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "options": {
            "stylePreprocessorOptions": {
              "includePaths": ["projects"]
            }
          }
        }
      }
    }
  }
}

After above change, you will have to restart the dev server.

5. Use the stats density mixin

Now we can use the density mixin in the src/styles/_density.scss file.

1
@use "@angular/material" as mat;
2
@use "app/ui/src" as ui;
3

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

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

Custom Component Styles