21

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?

Edric
  • 24,639
  • 13
  • 81
  • 91
Paul H
  • 600
  • 1
  • 5
  • 13
  • 2
    `import { MatButtonModule } from '@angular/material';` I think you need to replace this. `` and you can alse change this with your button. – Abhishek Dec 07 '18 at 15:00
  • Possible duplicate of https://stackoverflow.com/questions/40195457/material-design-component-is-not-a-known-element-in-angular2 – Sunil Singh Dec 07 '18 at 17:18

1 Answers1

60

It is:

<button mat-button>foo</button>

not

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

Official doc.

SeleM
  • 9,310
  • 5
  • 32
  • 51