Sorry for don't put a plnkr instead...I am learning how to use it... My chart was working fine from the first parent.component to the second parent.component until I move it to a child component using @input to fire an event coming from a button to open the child component. (for the first to the second I also use @input)
The second strange thing is in my child component I've got a second button to hide the chart, when I click to hide and i open again then the chat works !!! So when I use the toggleChild() just the html is rendered but when I use the hideChart() method it rendered everything
console.log(chartInstance) is returning in both cases but console.log(data) is returning directly with toggleChild() and after few seconds with hideChart()
I suppose the issue could come from the lifecycle hook..or maybe the event..
So if anyone got some ideas...thanks in advance
first parent html:
<img src="./assets/img/fold_down_black.png"
class="clickdaydetail" type="button" label="Click"(click)="toggleChild()"/>
<div><my-daydetail [showMePartially]="showVar" ></my-daydetail>
</div>
first parent.ts:
export class AppliV2Component {
showVar = false; // Pour daytail
hideVar = true;
constructor(private userService2: UserService2) {
}
toggleChild() {
this.showVar = !this.showVar;
this.hideVar = !this.hideVar;
}
second parent html who's already a child himself :
<div *ngIf="showMePartially" class="daydetail2" > <!-- this part will
be toggled by the parent component button -->
<img type="button" label="Click" (click)="hideChart()" id="foldup"
src="./assets/img/fold_up_blacksmall.png"/>
<span id="infonc">Informations sur le fonctionnement</span>
<app-pie-chart [minifiedMe]="hideMeup" ></app-pie-chart>
<div><app-fonctionnaly [minifiedMe]="hideMeup" ></app-fonctionnaly>
</div>
</div> <!-- End de daydetail2 -->
second parent.ts:
export class MyDaydetailComponent {
@Input() showMePartially: boolean;
hideMeup = true;
constructor(private UserService3: UserService3) {
}
hideChart() {
this.hideMeup = !this.hideMeup;
}
}
child.html:
<div *ngIf="minifiedMe" class="thebigPie">
<div class="chart-pie">
<chart [options]="options" (load)="saveInstance($event.context)">
</chart>
</div> <!-- End of chart-pie -->
</div> <!-- End of thebigPie -->
child.ts:
export class PieChartComponent implements OnDestroy, OnInit {
@Input() minifiedMe: boolean;
options: any;
data: Object[];
chart: any;
dataSubscription: Subscription;
constructor(private userService3: UserService3) {
this.options = {
chart: { type: 'pie',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false, },
credits: { enabled: false },
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
title: {
text: null
},
plotOptions: {
pie: {
startAngle: -90,
endAngle: 90,
allowPointSelect: false,
colors: ['#648e59'],
cursor: 'pointer',
dataLabels: {
enabled: false,
}
}
},````
Sorry for don't put a plnkr instead...I am learning how to use it... My chart was working fine from the first parent.component to the second parent.component until I move it to a child component using @input to fire an event coming from a button to open the child component. (for the first to the second I also use @input)
The second strange thing is in my child component I've got a second button to hide the chart, when I click to hide and i open again then the chat works !!! So when I use the toggleChild() just the html is rendered but when I use the hideChart() method it rendered everything
console.log(chartInstance) is returning in both cases but console.log(data) is returning directly with toggleChild() and after few seconds with hideChart()
I suppose the issue could come from the lifecycle hook..or maybe the event..
So if anyone got some ideas...thanks in advance
first parent html: