如何在 Angular Material 对话框组件中显示组件？

Question

I would like to show parentComponent that generating c3 charts, inside DialogModalComponent. I can see the text from parentComponent when I open the dialog, but it's not showing the c3 Chart. How can I show the c3 chart that's been created in parent component to show in Dialog ModalComponent?

Answer 1

There is an error in your stackblitz.
At your app.module change to:

import { MatDialogModule } from '@angular/material/dialog';

Now the real question. In your parent component, when generating your graphic you are selecting the div with an id as seen here:

var chart = c3.generate({
  bindto: '#barChart',
  ...
}

The problem is: when reusing this component, the c3 generator will try to find an id barChart in you html. Turns out it is find the first one that is already showing up and not the new one inside the modal.
To fix this, I think the @ViewChild can help:

In parent.component.html:
<div #barChart></div>

And in parent.component.ts:

export class ParentComponent implements OnInit {
  @ViewChild('barChart') barChart:ElementRef;
  ...
  createChart(){
    var chart = c3.generate({
    bindto: this.barChart.nativeElement,
    ...
  }  

This way you component always will find it's own barChart

Answer 2

No provider for MatDialog!

Please check your app.module.ts the import statement is wrong.

import { MatDialogModule } from '@angular/material';

Please check the official documentation of Angular Material design

import {MatDialogModule} from '@angular/material/dialog';

and in your component file

import { MatDialog } from '@angular/material/dialog';

Rest of the connectivity is fine . Hope this will solve your problem Cheers!