File
|
stats
|
Type : AggregateResult[]
|
|
|
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { AggregateResult } from 'ccf-database';
@Component({
selector: 'ccf-stats-list',
templateUrl: './stats-list.component.html',
styleUrls: ['./stats-list.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class StatsListComponent {
@Input() statsLabel!: string;
@Input() stats!: AggregateResult[];
}
<div class="stats-container">
<div class="header">
{{ statsLabel }}
</div>
<div class="stats-row" *ngFor="let stat of stats">
<div class="stat">{{ stat.count }}</div>
<div class="label">{{ stat.label }}</div>
</div>
</div>
.stats-container {
margin-bottom: 2rem;
min-height: 9rem;
.header {
margin-bottom: 1rem;
}
.stats-row {
display: flex;
flex-direction: row;
height: 1.325rem;
.stat {
width: 2rem;
margin-right: 1rem;
text-align: right;
}
.label {
flex-grow: 1;
text-align: left;
}
}
}
Legend
Html element with directive