mat-button is not a known element

Question

I don't get it. I think I imported all necessary module, but it keeps telling me:

'mat-button' is not a known element:

app.module.ts:

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    BrowserAnimationsModule,
    MatButtonModule,
  ],
  declarations: [AppComponent],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  constructor() {}
}

app.component.html

<mat-button>foo</mat-button>

app.component.scss is empty.

I know there are lots of posts about this. But nothing helped me, because I think I imported everything (MatButtonModule) correctly. Anyone an idea what I could do?

Answer 1

It is:

<button mat-button>foo</button>

not

<mat-button>foo</mat-button>

Official doc.