typescript 30 lines · 5 steps

Signal inputs and computed in Angular

A rating-stars component derives its rendered state from signal inputs using computed values that recalculate automatically.

Explained by highlit

Angular Intermediate signals reactivity derived-state components input-transforms

1import { Component, input, computed } from '@angular/core';
2 
3function toNumber(value: number | string): number {
4  return typeof value === 'number' ? value : parseFloat(value);
5}
6 
7@Component({
8  selector: 'app-rating-stars',
9  standalone: true,
10  template: `
11    <div class="stars" [attr.aria-label]="label()">
12      @for (star of stars(); track $index) {
13        <span class="star" [class.filled]="star">★</span>
14      }
15    </div>
16  `,
17})
18export class RatingStarsComponent {
19  readonly value = input.required({ transform: toNumber });
20  readonly max = input(5, { transform: toNumber });
21 
22  protected readonly stars = computed(() => {
23    const filled = Math.round(this.value());
24    return Array.from({ length: this.max() }, (_, i) => i < filled);
25  });
26 
27  protected readonly label = computed(
28    () => `${this.value()} out of ${this.max()} stars`,
29  );
30}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Signal inputs with a transform coerce raw bindings into the type your component expects.
2computed signals derive state that stays in sync whenever their source signals change.
3Rendering from derived signals keeps templates declarative and free of manual update logic.

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';