Currently, I am a beginner in Angular and I am working on developing a web page. My goal is to have a dialog button that, when clicked, displays the heading message from the dialogComponent. However, when I click the button, the dialog box appears but it does not show the text that is located in the dialog.component.html.
Below is the content of the app.component.ts file:
import { Component } from '@angular/core';
import { MatDialog} from "@angular/material/dialog";
import { DialogComponent } from "./dialog/dialog.component";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
constructor(public dialog:MatDialog){}
onCreate():void{
const dialogRef = this.dialog.open(DialogComponent, {
width:'290px',
height:'300px',
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
});
}
}
Here is the content of the app.component.html file:
<button mat-raised-button (click)="onCreate()">Open Dialog</button>
Below is the content of the dialog.component.html:
<h1>Hello</h1>
Lastly, here is the content of the app.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { DialogComponent } from './dialog/dialog.component';
import { MatDialogModule } from '@angular/material/dialog'
import { BrowserAnimationsModule } from "@angular/platform-browser/animations"
import { MatButtonModule,MatCheckboxModule,MatTableModule } from "@angular/material"
@NgModule({
declarations: [
AppComponent,
DialogComponent
],
entryComponents:[DialogComponent],
imports: [
BrowserModule,
AppRoutingModule,
MatDialogModule,
BrowserAnimationsModule,
MatButtonModule,
MatCheckboxModule,
MatTableModule
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule { }
The dialog box currently looks like this: enter image description here