Build an Angular Standalone Component for a Statistics Card
Extract a statistics card into a small reusable component with typed inputs.
You are reading a translated version.
Dashboards often contain several cards with the same structure: a label and a number. Duplicated markup makes design changes repetitive. A small component keeps those cards consistent.
This example targets modern Angular with standalone components and signal inputs. Create the following two files in the same directory. The card receives data while its parent owns data loading, so the same card can display article, reader, or publication counts.
Implementation example
// statistic-card.ts
import { Component, input } from '@angular/core';
@Component({
selector: 'app-statistic-card',
standalone: true,
template: `<article><h2>{{ label() }}</h2><p>{{ value() }}</p></article>`,
})
export class StatisticCard {
label = input.required<string>();
value = input.required<number>();
}
// dashboard.ts
import { Component } from '@angular/core';
import { StatisticCard } from './statistic-card';
@Component({
selector: 'app-dashboard',
standalone: true,
imports: [StatisticCard],
template: `<app-statistic-card label="Articles" [value]="42" />`,
})
export class Dashboard {}
Check the result
Render Dashboard through an existing root component or route. The card should show “Articles” and 42. Add another card with a different value to verify that each instance works independently.
Inputs use parentheses because their values are signals. Bind [value]="42" so Angular receives a number rather than text. A standalone component must import components used by its template.
Exercise
Add an optional description input with an empty-string default. Display it only when provided. Keep HTTP requests outside this card so the component remains reusable.