typescript 52 lines · 8 steps

A CSS-driven progress ring in Angular

A standalone Angular component draws an SVG progress ring by pushing computed geometry into CSS custom properties via host bindings.

Explained by highlit

Angular Intermediate host-bindings css-custom-properties input-setters svg accessibility

1import { Component, HostBinding, Input } from '@angular/core';
2 
3type ProgressVariant = 'success' | 'warning' | 'danger';
4 
5@Component({
selector: 'app-progress-ring',
standalone: true,
template: `
  <svg viewBox="0 0 120 120">
    <circle class="track" cx="60" cy="60" r="54" />
    <circle class="indicator" cx="60" cy="60" r="54" />
  </svg>
  <span class="label">{{ value }}%</span>
`,
styleUrl: './progress-ring.component.css',
16})
17export class ProgressRingComponent {
private readonly circumference = 2 * Math.PI * 54;
19 
@Input() variant: ProgressVariant = 'success';
21 
@Input({ required: true })
set value(percent: number) {
  this._value = Math.min(100, Math.max(0, percent));
}
get value(): number {
  return this._value;
}
private _value = 0;
30 
@HostBinding('style.--ring-circumference')
get circumferenceVar(): string {
  return `${this.circumference}px`;
}
35 
@HostBinding('style.--ring-offset')
get offsetVar(): string {
  return `${this.circumference * (1 - this.value / 100)}px`;
}
40 
@HostBinding('style.--ring-color')
get colorVar(): string {
  return `var(--tone-${this.variant})`;
}
45 
@HostBinding('attr.role') readonly role = 'progressbar';
47 
@HostBinding('attr.aria-valuenow')
get ariaValue(): number {
  return this.value;
}
52}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Host bindings that return computed CSS custom properties let the browser handle rendering while the component owns the math.
2A setter on an @Input is the natural place to validate and clamp incoming values before they reach the view.
3Mirroring visual state into ARIA attributes keeps a custom control accessible to assistive technology.

Related explainers

typescript

import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
import localeFrExtra from '@angular/common/locales/extra/fr';
import localeDe from '@angular/common/locales/de';

Locale-aware bootstrapping in Angular

i18n localization dependency-injection

Intermediate 8 steps

typescript

import { Module } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';
import * as Joi from 'joi';

Validating env config at boot in NestJS

configuration schema-validation environment-variables

Intermediate 8 steps

typescript

import { Inject, Injectable, Logger } from '@nestjs/common';
import { CACHE_MANAGER } from '@nestjs/cache-manager';
import { Cache } from 'cache-manager';
import { InjectRepository } from '@nestjs/typeorm';

A cache-aside country lookup in NestJS

cache-aside dependency-injection batch-lookup

Intermediate 8 steps

typescript

import { Injectable, effect, signal, computed } from '@angular/core';
 
interface Preferences {
  theme: 'light' | 'dark';

A signal-based preferences store in Angular

signals state-management persistence

Intermediate 7 steps

typescript

import { useEffect, useState } from "react";
 
interface Section {
  id: string;

Building a scroll-spy hook in React

custom-hooks intersectionobserver dom-observation

Intermediate 8 steps

typescript

import { Injectable, Scope, Inject, NotFoundException } from '@nestjs/common';
import { REQUEST } from '@nestjs/core';
import { Request } from 'express';
import { DataSource } from 'typeorm';