Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Mini Card Template
<mat-card class="dashboard-card">
<mat-card-header class="card-header">
<mat-card-title>
<h1 class="value-text" *ngIf="isCurrency">{{value | currency:'$':'symbol':'0.0' }}</h1>
<h1 class="value-text" *ngIf="!isCurrency">{{value}}</h1>
</mat-card-title>
<div mat-card-avatar class="card-icon">
<mat-icon [color]="color" class="avatar-icon">{{icon}}</mat-icon>
</div>
</mat-card-header>
<h3 class="title-text">{{title}}</h3>
<p class="difference-text">
<span
[ngClass]="{ 'green-text': isIncrease, 'red-text': !isIncrease }">{{ isIncrease ? '+' : '-' }}{{ percentValue | percent:'2.1-2' }}
<mat-icon *ngIf="isIncrease">arrow_upward</mat-icon>
<mat-icon *ngIf="!isIncrease">arrow_downward</mat-icon>
</span>
<span class="duration">{{duration}}</span>
</p>
</mat-card>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.