CODEWITHSUNDEEP
angulartypescriptc3.js
Avocado
Avocado

Reputation: 327

How to show a component inside Angular Material dialog component?

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?

Upvotes: 0

Views: 1996

Answers (2)

user6021112
user6021112

Reputation:

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!

Upvotes: 0

Doguita
Doguita

Reputation: 15703

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

Upvotes: 2

Related Questions