Angular компоненты материала не работают внутри `Material Dialog`

Question

Я использую свойства mat-form-field, mat-dialog-close и ng-model внутри диалогового окна. Но его ошибка выдачи говорит о его неизвестном свойстве ввода / кнопки.

title-dialog. html

<h1 mat-dialog-title></h1>
<div mat-dialog-content>
  <p>Enter Column Name</p>
  <mat-form-field>
    <input matInput [(ngModel)]="data.animal" />
  </mat-form-field>
</div>
<div mat-dialog-actions>
  <br />
  <button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>
    Ok
  </button>
</div>

MyComponent.ts

import {
    Component,
    OnInit,
    Input,
    OnChanges,
    Output,
    EventEmitter
} from '@angular/core';
import {
    Inject
} from '@angular/core';
import {
    MatDialog,
    MatDialogRef,
    MAT_DIALOG_DATA
} from '@angular/material/dialog';
import {
    MatTableDataSource
} from '@angular/material/table';
import {
    MatSnackBar
} from '@angular/material/snack-bar';


@Component({
    selector: 'app-test',
    templateUrl: './test.html',
    styleUrls: ['./test.scss'],
})
export class MyComponent implements OnInit {

    animal: string;
    constructor() {}
    ngOnInit(): void { this.openDialog(); }

    openDialog(): void {
        const dialogRef = this.dialog.open(TitleDialogComponent, {
            width: '250px',
            data: {
                animal: this.animal
            }
        });

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


}

@Component({
    selector: 'app-title-dialog',
    templateUrl: './title-dialog.html'
})
export class TitleDialogComponent {

    constructor(
        public dialogRef: MatDialogRef < TitleDialogComponent > ,
        @Inject(MAT_DIALOG_DATA) public data) {}

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

}

Я что-то упустил? Я включил весь импорт материалов в app.module.ts и его работоспособность в других компонентах.

Получение этих ошибок

import { NgModule } from '@angular/core';
import { MatStepperModule } from '@angular/material/stepper';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import {MatButtonModule} from '@angular/material/button';
import {MatCardModule} from '@angular/material/card';
import {MatSelectModule} from '@angular/material/select';
import {MatIconModule} from '@angular/material/icon';
import {MatTooltipModule} from '@angular/material/tooltip';
import {MatTableModule} from '@angular/material/table';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import {MatSnackBarModule} from '@angular/material/snack-bar';
import {MatTabsModule} from '@angular/material/tabs';
import {MatListModule} from '@angular/material/list';
import {MatDialogModule} from '@angular/material/dialog';


@NgModule({
  imports: [
    MatStepperModule,
    MatFormFieldModule,
    MatInputModule,
    MatButtonModule,
    MatCardModule,
    MatSelectModule,
    MatIconModule,
    MatTooltipModule,
    MatTableModule,
    MatToolbarModule,
    MatProgressSpinnerModule,
    MatSnackBarModule,
    MatTabsModule,
    MatListModule,
    MatDialogModule
  ],
  exports: [
    MatStepperModule,
    MatFormFieldModule,
    MatInputModule,
    MatButtonModule,
    MatCardModule,
    MatSelectModule,
    MatIconModule,
    MatTooltipModule,
    MatTableModule,
    MatToolbarModule,
    MatProgressSpinnerModule,
    MatSnackBarModule,
    MatTabsModule,
    MatListModule,
    MatDialogModule
  ]
})
export class MaterialModule {}

У меня только один модуль без подмодулей, а мой app.module.ts -

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from '../app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MyComponent} from '../components/home/home.component';
import { MaterialModule } from './material.module';
import { FlexLayoutModule } from '@angular/flex-layout';
import { RangeSelectionDirective } from '../components/range-selection.directive';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    RangeSelectionDirective
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    AppRoutingModule,
    MaterialModule,
    BrowserAnimationsModule,
    FlexLayoutModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

EDIT: только что заметил, что ваш TitleDialogComponent не объявлен в вашем AppModule. Вероятно, это основная причина -.-

In app.module.ts,

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    RangeSelectionDirective,
    TitleDialogComponent // <------- Add this
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    AppRoutingModule,
    MaterialModule,
    BrowserAnimationsModule,
    FlexLayoutModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Для нижеприведенного: все же лучше добавить ссылку. Хотя приведенного выше должно быть достаточно, чтобы решить вашу проблему.

Импорт вашего модуля кажется правильным. Тем не менее, из сообщений об ошибках ясно, что TitleDialogComponent не регистрирует ни один из модулей. Я предполагаю, что проблема без stackblitz, с которым можно поиграть, заключается в том, как вы открываете модальное окно.