course: Angular Material Components Theming System: Complete Guide | Create a custom theme | Angular Material Dev

[giscus[bot]]

course: Angular Material Components Theming System: Complete Guide | Create a custom theme | Angular Material Dev

Learn Material Design in Angular, Theming Angular Material Components and Developing your Angular application with Material Design like a pro.

https://angular-material.dev/courses/m2-ng-components/m2-ng-components/create-custom-theme

[akaustav]

Before adding [mat-raised-button]s in the src/app/app.component.html, we'll need to include MatButtonModule to the imports array of:

1. src/app/app.module.ts - if using non-standalone components, OR
2. src/app/app.component.ts - if using standalone components

1. When using non-standalone components

// src/app/app.module.ts

import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
...

@NgModule({
  ...
  imports: [
    ...
    MatButtonModule // <--- This line
  ],
  ...
})
export class AppModule {}

2. When using standalone components

// src/app/app.component.ts

import { Component } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
...

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  standalone: true,
  ...
  imports: [
    ...
    MatButtonModule // <-- This line
  ],
  ...
})
export class AppComponent { ... }

[shhdharmen]

I would recommend to update your project to Angular v17. Because all the content is written w.r.t. v17. For update guide, you can refer to https://angular-material.dev/courses/m2-ng-components/m2-ng-components/update-guide

[akaustav]

Side note: There seems to be something wrong with the way these comments are being associated with the respective tutorial pages. I had originally put this particular thread in the comments section at the bottom of the Create a custom theme page.

[akaustav]

@shhdharmen - Thanks for the response. We intend to upgrade our project to Angular 17 and beyond. But we're going in steps and right now we're transitioning our components to comply with the MDC design guidelines. We are using your excellent guide to understand and navigate some poorly documented intricacies that are involved with this migration.

Since the text and the table at the top of the Overview page shows that this guide was compatible with Angular Material version 15, 16 and 17, I was merely pointing out the facts for anyone else following along your guide who might run into similar hurdles as we did.

[shhdharmen]

#13 (reply in thread)