CODEWITHSUNDEEP
angularangular-material
Paul H
Paul H

Reputation: 670

mat-button is not a known element

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?

Upvotes: 26

Views: 20036

Answers (1)

SeleM
SeleM

Reputation: 9638

It is:

<button mat-button>foo</button>

not

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

Official doc.

Upvotes: 65

Related Questions