Angular material components is not working inside `Material Dialog`

user_6603094 0
Viewed 4418

I am using mat-form-field, mat-dialog-close and ng-model properties inside dialog box. But its throwing error saying its not known property of input/button.

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();
    }

}

Am I missing anything here? I have included all material imports in app.module.ts and its working fine in other components.

Getting these errors

enter image description here

Edit 1:

I am importing my material components here

Material.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 {}

I have only one module no submodules and my app.module.ts is

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 { }

angular-material angular
1 Answers

EDIT: Just noticed that your TitleDialogComponent is not declared in your AppModule. That's probably the main reason -.-

In app.module.ts,

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

For the below: still better to add a reference. Though the above should be enough to solve your problem.

Your module imports seem correct. That said, it's clear from the error messages that TitleDialogComponent is not registering any of the modules. My guess to the problem, without a stackblitz to play around with, is the way you open the Modal.

Try referencing the target modal as a property of its parent Component, like so:

export class MyComponent implements OnInit {

    animal: string;
    titleDialogRef: MatDialogRef<TitleDialogComponent>; // <------ Added this
    constructor() {}
    ngOnInit(): void { this.openDialog(); }

    openDialog(): void {
        // Assign to titleDialogRef instead
        this.titleDialogRef = this.dialog.open(TitleDialogComponent, {
            width: '250px',
            data: {
                animal: this.animal
            }
        });

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


}
user_87219300
Related