Course: Angular Material Components Theming System: Complete Guide | Setting up the project | Angular Material Dev

[giscus[bot]]

Course: Angular Material Components Theming System: Complete Guide | Setting up the project | 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/setting-up-the-project

[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