Angular2 - display charts

Question

In my angular2 application I'm using zingchart to display several charts. In all the examples i saw, this is how they display charts:

<code>
 <zingchart *ngFor="let chart of charts" [chart]="chart"></zingchart>
</code>

but what if i want to display each chart separately? i want to put a button between first chart and second chart. how can i do that? i need something like:

<code>
<zingchart  [chart]="charts[0]"></zingchart>
</code>

thanks in advance.

Oliver Cooke · Answer 1 · 2017-07-20T12:58:08.897

0

You could do something like this, so for each chart in charts display the chart and a corresponding button, all nicely wrapped up in a div for styling.

<div *ngFor="let chart of charts">
   <zingchart [chart]="chart"></zingchart>
   <button type="button">Click Me!</button>
</div>

You could even wrap each chart it a custom component containing all the necessary items in one area.

Parent Component

<div *ngFor="let chart of charts">
    <customcomponent [chart]="chart"></customcomponent>
</div>

Child Component

<zingchart [chart]="chart"></zingchart>
<button type="button">Click Me!</button>

Hope that helps.

edited Jul 20 '17 at 12:58

answered Jul 20 '17 at 12:50

Oliver Cooke

1,059
1
8
22

I don't want a button after each chart, only after first one. so i added *ngIf to check index, but it didnt worked – user6617577 Jul 20 '17 at 13:09
@user6617577 Just declare before the ngFor and pass in the first value of the array, if you dont want to do that look at this article to see how you get the index. https://stackoverflow.com/questions/35405618/ngfor-with-index-as-value-in-attribute – Oliver Cooke Jul 20 '17 at 13:15
I tried that but with no sucess. can you tell me what im doing wrong?

– user6617577 Jul 20 '17 at 13:21
@user6617577 it's 0 indexed but here's a plunkr example https://plnkr.co/edit/4yRRNK8Ajm30cnut4KEn?p=preview – Oliver Cooke Jul 20 '17 at 13:42
@user6617577 Any luck? – Oliver Cooke Jul 21 '17 at 10:52

Angular2 - display charts

1 Answers1