Exploring Material 3 Design With Angular Material
Tags: angular, angularmaterial, webdev
Published: 2024-04-26 12:44:19

---
title: Exploring Material 3 Design With Angular Material
published: true
description: In this article, we will explore Material 3 design integration with Angular Material.
tags: angular,angularmaterial,webdevelopment
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8b4j9noqsihwokrz4n1l.png
canonical_url: https://angular-material.dev/articles/angular-material-3
# Use a ratio of 100:42 for best results.
# published_at: 2024-04-26 12:26 +0000
---

Angular Material team is soon going to roll out the stable usage of it's Material 3 (M3) integration. This integration is already part of it's `next` major release.

In this article, we are going to use the yet to be released `18` (or `next`) version of Angular, Angular CLI and Angular Material. The goal of this article is to give a quick idea about what is coming up with Angular Material in it's next major release.

## Creating a `v18` Angular Project

```bash
npx @angular/cli@next new angular-material-3
```

Then select `Sass (SCSS)` for styling and `No` for `SSR/SSG/Prerendering`.

```bash
? Which stylesheet format would you like to use? Sass (SCSS)     [ https://sass-lang.com/documentation/syntax#scss ]
? Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? No
```

And lastly, move into the project folder:

```bash
cd angular-material-3
```

## Adding Angular Material `v18`

Let's add `@angular/material` into the newly created project:

```bash
ng add @angular/material@next
```

And select answers as below:

```bash
? Choose a prebuilt theme name, or "custom" for a custom theme: Custom
? Set up global Angular Material typography styles? Yes
? Include the Angular animations module? Include and enable animations
```

### New M3 Themes

When selecting the theme, notice that now we are getting options of new themes:

| Theme Name       |
| ---------------- |
| Rose & Red       |
| Azure & Blue     |
| Magenta & Violet |
| Cyan & Orange    |

These are new themes created by Angular Material team to be compatible to M3.

If you have selected **Custom**, your `styles.scss` would look like below:

```scss
@use "@angular/material" as mat;

@include mat.core();

$angular-material-3-theme: mat.define-theme(
  (
    color: (
      theme-type: light,
      primary: mat.$azure-palette,
      tertiary: mat.$blue-palette,
    ),
    density: (
      scale: 0,
    ),
  )
);

:root {
  @include mat.all-component-themes($angular-material-3-theme);
}
```

The syntax is almost similar to what it was in Material 2 (M2) integration with Angular Material. But, notice the usage of new palettes. We are using `$azure-palette` and `$blue-palette`. Below are all new palettes introduced in M3 integration with Angular Material, that can be used with the `primary` and `tertiary` options:

- `$red-palette`
- `$green-palette`
- `$blue-palette`
- `$yellow-palette`
- `$cyan-palette`
- `$magenta-palette`
- `$orange-palette`
- `$chartreuse-palette`
- `$azure-palette`
- `$violet-palette`
- `$rose-palette`

## Creating basic app

Let's create a simple application to see and understand basic usages of updated `SASS` `mixins` for M3 in Angular Material.

We are going to use [Angular Material Schematics](https://material.angular.io/guide/schematics) to generate components:

```bash
ng generate @angular/material:navigation layout
ng generate @angular/material:dashboard dashboard
ng generate @angular/material:address-form address-form
ng generate @angular/material:table table
ng generate @angular/material:tree tree
ng generate @angular/material:drag-drop drag-drop
```

### Updating layout

Go to `src/app/layout/layout.component.html` and add `<ng-content>` in `<mat-sidenav-content>` like below:

```html
<mat-sidenav-content>

    <!--mat-toolbar remains same-->

    <div class="sidenav-scroll-wrapper">
      <div class="sidenav-content">
        <ng-content></ng-content>
      </div>
    </div>
  </mat-sidenav-content>
```

Next, let's add and modify some styling in `src/app/layout/layout.component.scss` so that sidenav content looks more M3 oriented:

```scss
.sidenav-container {
  height: 100%;
}

.sidenav {
  width: 240px;
  padding: 0 8px;
  box-sizing: border-box;
}

.mat-toolbar.mat-primary {
  position: sticky;
  top: 0;
  z-index: 1;
}

mat-sidenav-content {
  padding-right: 16px;
}

.sidenav-scroll-wrapper {
  height: calc(100dvh - 64px - 16px);
  overflow: auto;
  border-radius: 16px;
  box-sizing: border-box;
}

.sidenav-content {
  max-height: 100%;
  overflow-y: auto;
  padding: 16px;
  box-sizing: border-box;
  @media (pointer: fine) {
    &::-webkit-scrollbar {
      background-color: transparent;
      width: 8px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 4px;
    }
  }
}

@media (max-width: 959.98px) {
  mat-sidenav-content {
    padding-right: 8px;
    padding-left: 8px;
  }
  .sidenav-scroll-wrapper {
    height: calc(100dvh - 64px);
  }
  .sidenav-content {
    overflow-y: visible;
    padding: 8px;
  }
}

```

### Using layout

Now, simply go to `src/app/app.component.html` and update it's content with below:

```html
<app-layout>
  <router-outlet />
</app-layout>
```

Also, don't forget to import `LayoutComponent` in `src/app/app.component.ts`.

At this point, the output looks like below:

![output after updating layout](https://res.cloudinary.com/dbgsyjnmu/image/upload/v1714125105/angular-material.dev/Exploring%20Material%203%20With%20Angular%20Components/updating%20layout.jpg)

Let's add some colors in the content area so that it's easy to distinguish.

### Theming layout

Create a file `src/app/layout/_layout-component.theme.scss` with below content:

```scss
@use "@angular/material" as mat;

@mixin theme($theme) {
  .sidenav-scroll-wrapper {
    background-color: rgba(mat.get-theme-color($theme, primary-container), 0.75);
  }
  .sidenav-content {
    @media (pointer: fine) {
      &::-webkit-scrollbar-thumb {
        background-color: mat.get-theme-color($theme, primary);
      }
    }
  }
}

```

Notice the usages of `get-theme-color` mixin:

1. To get color of the `primary-container` role, we used `mat.get-theme-color($theme, primary-container)`
2. To get color from tonal palette, we used `mat.get-theme-color($theme, primary)`.

To learn more, checkout [Reading tonal palette colors](https://material.angular.io/guide/material-3#reading-tonal-palette-colors) and [Reading color roles](https://material.angular.io/guide/material-3#reading-color-roles).

### Using layout component theme

Now, include and call this mixin in main `styles.scss` file:

```scss
@use "./app/layout/layout-component.theme";

:root {
    @include layout-component.theme($theme);
}
```

Let's see the output now:

![output after layout theming](https://res.cloudinary.com/dbgsyjnmu/image/upload/v1714124959/angular-material.dev/Exploring%20Material%203%20With%20Angular%20Components/layout%20theming.jpg)

### Updating routes

Go to your `src/app/app.routes.ts` and update the routes:

```ts
import { Routes } from '@angular/router';

export const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'dashboard',
  },
  {
    path: 'dashboard',
    loadComponent: () =>
      import('./dashboard/dashboard.component').then(
        (c) => c.DashboardComponent
      ),
      title: 'Dashboard'
  },
  {
    path: 'address',
    loadComponent: () =>
      import('./address-form/address-form.component').then(
        (c) => c.AddressFormComponent
      ),
      title: 'Address'
  },
  {
    path: 'table',
    loadComponent: () =>
      import('./table/table.component').then(
        (c) => c.TableComponent
      ),
      title: 'Table'
  },
  {
    path: 'tree',
    loadComponent: () =>
      import('./tree/tree.component').then(
        (c) => c.TreeComponent
      ),
      title: 'Tree'
  },
  {
    path: 'drag-drop',
    loadComponent: () =>
      import('./drag-drop/drag-drop.component').then(
        (c) => c.DragDropComponent
      ),
      title: 'Drag-Drop'
  },
];

```

And to load the routes, we will first update `src/app/layout/layout.component.ts`:

```ts
import { RouterLink, RouterLinkActive } from '@angular/router';

@Component({
  selector: 'app-layout',
  // rest remains same
  imports: [
    // Add below imports
    RouterLink,
    RouterLinkActive
  ]
})
export class LayoutComponent {
  rootRoutes = routes.filter(r=>r.path);

  // rest remains same
}
```

Now, replace `<mat-nav-list>` content with below:

```html
<mat-nav-list>
    @for (item of rootRoutes; track $index) {
        <a
            mat-list-item
            [routerLink]="item.path"
            #link="routerLinkActive"
            routerLinkActive
            [activated]="link.isActive"
        >
            {{ item.title }}
        </a>
    }
</mat-nav-list>
```

At this point the output looks like below:

{% embed https://res.cloudinary.com/dbgsyjnmu/video/upload/v1714125251/angular-material.dev/Exploring%20Material%203%20With%20Angular%20Components/updating%20routes.mp4 %}

## Custom M3 theme

We saw in the beginning that Angular Material team provides some pre-built palettes and themes.

But, it is also possible to generate a theme based on a custom color. To do so, simply run below command:

```bash
ng generate @angular/material:m3-theme
```

After running the above script, your will be presented with below question:

```bash
What HEX color should be used to generate the M3 theme? It will represent your primary color palette. (ex. #ffffff)
```

Simply enter `#6750A4` for the above question and leave blank for the rest of the questions.

The schematic will create a file called `m3-theme.scss` at root. You can explore the file to understand how the theme is created:

```scss
// m3-theme.scss - content reduced for brevity

$light-theme: mat.define-theme((
  color: (
    theme-type: light,
    primary: $_primary,
    tertiary: $_tertiary,
  )
));
$dark-theme: mat.define-theme((
  color: (
    theme-type: dark,
    primary: $_primary,
    tertiary: $_tertiary,
  )
));
```

Now, you can simply use these newly created themes in main `styles.scss`:

```scss
@use "../m3-theme";

:root {
  @include mat.all-component-themes(m3-theme.$light-theme);
}
```

And the output will look like below:

![embedded video](https://res.cloudinary.com/dbgsyjnmu/video/upload/v1714124096/angular-material.dev/Exploring%20Material%203%20With%20Angular%20Components/custom%20m3%20theme.mp4)

## Conclusion

We created a `v18` Angular application. And installed `@angular/material`'s `next` (`v18`) version in it.

Then we created some boilerplate components like dashboard, address-form, tree, table and drag-drop views using [Angular Material Schematics](https://material.angular.io/guide/schematics).

After creating components, we modified layout component and it's styling, and we started using it in main app component.

Lastly, we learned the usage of new schematic `ng generate @angular/material:m3-theme`.

The code is available on [GitHub](https://github.com/Angular-Material-Dev/angular-material-3).

## Live Playground

{% embed https://stackblitz.com/github/Angular-Material-Dev/angular-material-3 %}