[Solved] Error NG8001: ‘Mat-Form-Field’ Is Not a Known Element in Angular CLI

Hey angular geek, if you have the Error NG8001: ‘Mat-Form-Field’ Is Not a Known Element in Angular, you are at the correct place to find the solution.

I was developing a mini project using Angular 9 at the front-end with the Angular material theme. I was a novice to the Angular at that time.

After some development, I tried to put a form field in a dialog box of an angular material theme. However, my code was not working out. The material theme was not applying to the input field I added to the dialog box. Even more, I was having an error that Mat-Form-Field is not a known element.

Error NG8001: Is Not a Known Element

The above error for any angular element occurs when we forget to import that element directives from the angular source to our working component.ts file.

However, when I tried to debug, I found that the input skin of the angular material theme was applied to the app.module.html file. And the same input field code was not working inside the dialog file.

But, I have already imported all the necessary components from the angular material directive. My code was as mentioned below.

People Also Search For: TypeScript Error TS2305: Module ‘”{FilePath}/app.component”’ Has No Exported Member ‘ErrorseaFilter’ in Angular CLI

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent, GetStartedDialog } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import {MatToolbarModule} from '@angular/material/toolbar';
import {MatButtonModule} from '@angular/material/button';
import {MatDialogModule} from '@angular/material/dialog';
import {MatInputModule} from '@angular/material/input';

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

As you can see, all the necessary components are already imported in the app.module.ts file.

app.component.ts

import { Component } from '@angular/core';
import {MatDialog, MatDialogRef} from '@angular/material/dialog';

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

  openDialog(): void {
    const dialogRef = this.dialog.open(GetStartedDialog, {
      width: '300px'
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
    });
  }
}

@Component({
  selector: 'get-started-dialog',
  templateUrl: 'get-started-dialog.html',
})
export class GetStartedDialog {

  constructor(
    public dialogRef: MatDialogRef) {}

  onNoClick(): void {
    this.dialogRef.close();
  }

}

app.component.ts

<section class="mat-typography">
  <div>
    <button mat-raised-button color="primary" (click)="openDialog()">Get Started</button>
  </div>
</section>

get-started-dialog.html

<div mat-dialog-content style="text-align: center;">
    <h3 class="text-accent">Dialog</h3>
    <hr>
    <p>Enter your details.</p>
    <br>
    <mat-form-field class="full-width">
        <mat-label>Name</mat-label>
        <input matInput placeholder="Enter Your Full Name">
    </mat-form-field>
</div>

Solution

After some hours of research and debugging, I found that the angular generates dynamic content inside the dialog element.

So we have to add the dialog box class at declarations and entryComponents in the @NgModule in our module.ts file. My app.module.ts file was as follows after the change.

Updated app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent, GetStartedDialog } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import {MatToolbarModule} from '@angular/material/toolbar';
import {MatButtonModule} from '@angular/material/button';
import {MatDialogModule} from '@angular/material/dialog';
import {MatInputModule} from '@angular/material/input';

@NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatToolbarModule,
    MatButtonModule,
    MatDialogModule,
    MatInputModule
  ],
  declarations: [
    AppComponent,
    GetStartedDialog
  ],
  entryComponents: [
    GetStartedDialog
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Explanation

As you can see, I added the GetStartedDialog class inside declarations and entryComponents, which helps the dialog box to compile its inside angular components/elements at the runtime.

Read Also: [Solved] Uncaught TypeError: Failed to Execute ‘createObjectURL’ on ‘URL’: No Function Was Found That Matched the Signature Provided

Conclusion

I hope now you can also resolve your problem of not having a material design of an Angular element inside the dialog box.

People also search for: [Solved] Error NG0100: Expression has changed after it was checked

Please comment on your problem below, I will be happy to help you.

Enjoy Debugging 😀

5 thoughts on “[Solved] Error NG8001: ‘Mat-Form-Field’ Is Not a Known Element in Angular CLI

  1. When i implement the above code, i get the following code

    Module ‘”./app.component”‘ has no exported member ‘BranchDialog’.

    1. Hello Sheeba,

      First, please check that you have installed all the modules which you use in your project.
      After that check your “app.module.ts” file if you have imported all modules correctly.

      I think this will help 🙂

    2. I found the solution.

      Please remove “import { BranchDialog } from …” line from your app.component.ts file.
      Reason: The reason is you have already imported that component in app.module.ts file.

      Please ping back if you still face any issue 🙂

  2. Thanks, after 5 hours looking for an answer of my issue… I found your web page and solution which works for me.
    Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *