Cookie Consent by Free Privacy Policy Generator 📌 Exploring Material 3 Design With Angular Material


✅ Exploring Material 3 Design With Angular Material


💡 Newskategorie: Programmierung
🔗 Quelle: dev.to

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

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

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

? 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:

cd angular-material-3

Adding Angular Material v18

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

ng add @angular/material@next

And select answers as below:

? 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:

@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 to generate components:

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:

<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:

.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:

<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

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:

@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 and Reading color roles.

Using layout component theme

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

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

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

Let's see the output now:

output after layout theming

Updating routes

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

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:

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:

<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:

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:

ng generate @angular/material:m3-theme

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

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:

// 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:

@use "../m3-theme";

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

And the output will look like below:

embedded video

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.

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.

Live Playground

...

✅ Exploring Material 3 Design With Angular Material


📈 45.81 Punkte

✅ Updating to Angular Material 18: Keeping Support for Material 2 and Adding Support for Material 3


📈 39.71 Punkte

✅ Angular Addicts #25: Angular and Wiz will be merged, the differences between React and Angular & more


📈 33.39 Punkte

✅ How to upgrade your Angular web project from Angular V13 to Angular V17


📈 33.39 Punkte

✅ CVE-2023-26116 | angular angular.copy redos (SNYK-JS-ANGULAR-3373044)


📈 33.39 Punkte

✅ Angular Series Part 2 From Basics to Advanced: Exploring Angular’s ngOnChanges


📈 32.25 Punkte

✅ Angular 5.1 zusammen mit Angular Material 5.0.0 erschienen


📈 31.79 Punkte

✅ 7 steps to Angular Material Dialog instead of Angular Component


📈 31.79 Punkte

✅ ANGULAR (FULL APP) WITH ANGULAR MATERIAL, ANGULARFIRE & NGRX


📈 31.79 Punkte

✅ Flutter Design Systems: Exploring Modern Alternatives to Material Design


📈 30.79 Punkte

✅ Material Design Components: Material Motion - MAD Skills


📈 24.69 Punkte

✅ Material Design Components: Material Theming - MAD Skills


📈 24.69 Punkte

✅ Google's New Angular 2.0 Isn't Compatible With Angular 1


📈 22.26 Punkte

✅ The Stages of an Angular Architecture (Angular Global Summit)


📈 22.26 Punkte

✅ Angular 17 Encrypting Decrypting Data with CryptoJs | Angular 17 Tutorial | React


📈 22.26 Punkte

✅ Google's New Angular 2.0 Isn't Compatible With Angular 1


📈 22.26 Punkte

✅ I believe in the Angular Roadmap: Especially Angular’s Full Potential in 2024


📈 22.26 Punkte

✅ Angular is Much Better, But is Angular Universal?


📈 22.26 Punkte

✅ Angular Authentication: Upgrade to Angular 18 🚀


📈 22.26 Punkte

✅ Unveiling Angular 17 - The Angular Renaissance


📈 22.26 Punkte

✅ Angular Addicts #26: Angular 18, best practices, recent conference recordings & more


📈 22.26 Punkte

✅ Updates from the Angular Team and new Angular 17 features!


📈 22.26 Punkte

✅ Angular se reinventa: Bienvenido a la era de Angular v18


📈 22.26 Punkte

✅ CVE-2023-26118 | angular redos (SNYK-JS-ANGULAR-3373046)


📈 22.26 Punkte

✅ Angular Series Part 1 Unlocking Angular Lifecycle Hooks: Your Path to Efficient Web Apps


📈 22.26 Punkte

✅ CVE-2023-26117 | angular redos (SNYK-JS-ANGULAR-3373045)


📈 22.26 Punkte

✅ rx-angular/state - a library for managing states of an Angular application


📈 22.26 Punkte

✅ Angular Universal is the Problem, not Angular


📈 22.26 Punkte

✅ Implementing Angular Server-Side Rendering (SSR) AKA Angular Universal


📈 22.26 Punkte

✅ How to Run Angular Apps Using Angular CLI and PM2


📈 22.26 Punkte

✅ A Comprehensive Guide to the Angular Roadmap: Mastering Angular in 2024


📈 22.26 Punkte











matomo

Datei nicht gefunden!