My DeleteAssociationDialog subcomponent contains a method called openDeleteAssociationDialog:
delete-association-dialog.component.ts
import { Component } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material';
@Component({
selector: 'app-delete-association-dialog',
templateUrl: 'delete-association-dialog.component.html',
styleUrls: ['delete-association-dialog.component.css']
})
export class DeleteAssociationDialogComponent {
constructor(
public dialog: MatDialog,
public dialogRef: MatDialogRef<DeleteAssociationDialogComponent>) { }
openDeleteAssociationDialog(): void {
let dialogRef = this.dialog.open(DeleteAssociationDialogComponent, {
width: '250px'
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
});
}
}
I want to display the dialog when clicking on a button in the parent component's (app.component) HTML. I am using @ViewChild to create a reference:
app.component.html [fragment]
<button mat-icon-button color="warn" (click)="child.openDeleteAssociationDialog()">
<mat-icon>delete</mat-icon>
</button>
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material';
import { FormsModule } from '@angular/forms';
import { MatDialogModule } from '@angular/material';
import { AppComponent } from './app.component';
import { DeleteAssociationDialogComponent } from './delete-association-dialog/delete-association-dialog.component';
import { MatDialogRef} from '@angular/material/dialog'
@NgModule({
declarations: [
AppComponent,
DeleteAssociationDialogComponent,
],
entryComponents: [DeleteAssociationDialogComponent],
imports: [
BrowserModule,
NgModule,
BrowserAnimationsModule,
MatButtonModule,
MatInputModule,
FormsModule
MatDialogModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
import { Component, ViewChild } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material';
import { DeleteAssociationDialogComponent } from './delete-association-dialog/delete-association-dialog.component';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css', './app.component.panel.css']
})
export class AppComponent {
@ViewChild('DeleteAssociationDialogComponent') child: DeleteAssociationDialogComponent;
}
An error is occurring -- "ERROR TypeError: Cannot read property 'openDeleteAssociationDialog' of undefined"
What could be causing this error? How should I correctly reference a subcomponent method from a parent component's HTML template?