<p class="my-portfolio-title">My portfolio</p>
<div class="container">
    <kendo-card width="320px" class="card" *ngFor="let card of cryptoCards">
        <kendo-card-header class="k-hstack">
            <kendo-avatar
                width="40px"
                height="40px"
                [imageSrc]="getImg(card)"
                shape="circle"
                style="background-color: transparent;"
            ></kendo-avatar>
            <div>
                <h1 kendoCardTitle class="card-title">
                    {{ card.symbol }}
                    <span class="price">{{ intl.formatNumber(card.currentPrice, 'c') }}</span>
                </h1>
                <p kendoCardSubtitle class="card-subtitle">
                    {{ card.currency }}
                    <span class="price" [ngClass]="{ 'negative': card.change_24h < 0, 'positive': card.change_24h > 0 }">
                        <kendo-svg-icon [icon]="downArrowIcon" *ngIf="card.change_24h < 0"></kendo-svg-icon>
                        <kendo-svg-icon [icon]="upArrowIcon" *ngIf="card.change_24h > 0"></kendo-svg-icon>
                        <span>
                            {{getPriceChange(card) | currency: "USD"}} ({{card.change_24h}}%)
                        </span>
                    </span>
                </p>
            </div>
        </kendo-card-header>
    </kendo-card>
</div>
