Adding to component constructor in Angular makes the entire page return blank?

Question

I am trying to add a basic MatDialog to my project. In the project I have 2 components, a header for the page and another called "CardBox", which basically just holds cardboxes of links to different websites.
When you click on the "i" icon, I would like to open a dialog box with more information.
See image below.

Initially, my understanding was that I just add a MatDialog field in the constructor of Cardbox component. Like so:

cardboxes.component.html

<mat-card id="CARDBOX">
   <img class="info" src="path/image.jpg" alt="image" height=25px (click)="openDialog()"/>
</mat-card>

cardboxes.component.ts

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

  constructor(private dialog: MatDialog) { }

  ngOnInit(): void {}

  openDialog() {
   this.dialog.open(CardBoxComponent);
  }
}

(I'm aware that this is calling its own component, and would just open the same thing again. I am just trying to get it to work first.)

app.component.html

<div id="bg">
    <app-header></app-header>
    <br>
    <app-cardbox></app-cardbox>
</div>

However, in doing so, it removes EVERYTHING from the page except the background, including the header component. This is what it looks like when the program is run when there is SOMETHING in the constructor of Cardbox.

As you can see, having something in the constructor gets rid of everything on the page, which does not make sense to me as it removes the header, which is a completely separate component from the cardbox. I have tried everything to make it work but still it is not working.

Why is touching the constructor makes the entire project blank? Is there something I forgot to add to another file? And how can I add a MatDialog popup feature to the project in a way that works?

TLDR: When I put anything in the constructor of one of my components, the entire page disappears. How do I resolve this?

Still seeking answer to this :(

Answer 1

You are using it wrong.
I am surprised your app compiles when doing this.dialog.open(CardBoxComponent)
What you need to do is, first create your dialog component.
To make things simple you can create it in the same file as you CardBox component, but make sure you put it outside CardBox class:

cardboxes.component.ts

@Component({
  selector: 'dialog-overview-example-dialog',
  templateUrl: 'dialog-overview-example-dialog.html',
})
export class DialogOverviewExampleDialog {

  constructor(
    public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
    // data is gonna be the data you pass to dialog when you open it from CardBox
    @Inject(MAT_DIALOG_DATA) public data: DialogData) {}

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

then you create a template for the dialog component:

dialog-overview-example-dialog.html

<h1 mat-dialog-title>more info</h1>
<div mat-dialog-content>
  <p>{{data.info}}</p>
</div>

finally you add openDialog(myInfo) function to your ts file, inside CardBox component:

cardboxes.component.ts

  openDialog(myInfo): void {
    const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: '250px',
      // data you pass to your dialog
      data: {info: myInfo}
    });

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

and add it to your template too:

cardboxes.component.ts

<mat-card id="CARDBOX">
   <img class="info" src="path/image.jpg" alt="image" height=25px (click)="openDialog('info about first site')"/>
</mat-card>

in this example I pass the info as a text, but it can be an object too.
Here is a demo to make things easier for you: link