As a beginner in Angular, Bootstrap, and front-end programming, I am looking to create multiple boxes that reveal detailed information when clicked. This is the desired outcome:
https://i.sstatic.net/Ak0eA.png
After clicking on box number 1:
https://i.sstatic.net/mXMpY.png
However, my current implementation looks like this:
https://i.sstatic.net/0R0Vx.png
I'm generating these boxes using an *ngFor loop in Angular as shown below:
<div class="container text-center" id="cryptocontainer">
<div class="row" *ngIf="coins">
<div *ngFor="let coin of objectKeys(coins); let i = index" id="currencybox" class="col-md-2" (click)="coinDetails(coin,i)">
<img id="image" [src]="getImage(coin)" class="img-responsive">
<div class="cryptoname">{{ coin }}</div>
<div class="cryptoprice">{{ coins[coin].USD | currency:'USD':true}}</div>
<div class="details" *ngIf="detailToggle[i]" no-lines>
<div class="row">
<div class="col">
<div class="label">CHANGE(30 dni)</div>
<canvas id="canvas{{i}}">{{ chart[i] }}</canvas>
</div>
</div>
<div class="row" id="details">
<div class="col-sm">
<div class="label">MARKET CAP</div>
<div class="answer">{{details.MKTCAP}}</div>
</div>
<div class="col-sm">
<div class="label">CHANGE(24h)</div>
<div class="answer">{{ details.CHANGE24HOUR }} ({{ details.CHANGEPCT24HOUR }}%)</div>
</div>
<div class="col-sm">
<div class="label">MAX (24h)</div>
<div class="answer">{{ details.HIGH24HOUR }}</div>
</div>
</div>
</div>
</div>
</div>
</div>