#signals code explainers

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 { Component, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ProductRecommendationsComponent } from './product-recommendations.component';

Deferred loading with @defer in Angular

lazy-loading signals standalone-components

Intermediate 8 steps

typescript

import { Component, computed, input, model, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
 
interface Product {

Reactive filtering with Angular signals

signals computed two-way-binding

Intermediate 9 steps

typescript

import { Component, computed, DestroyRef, inject, input, output, signal } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { interval, map, takeWhile } from 'rxjs';

How a signal-driven countdown works in Angular

signals reactivity rxjs

Intermediate 8 steps

typescript

import { Component, inject, signal } from '@angular/core';
import { CdkDragDrop, DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop';
import { HttpClient } from '@angular/common/http';
import { finalize } from 'rxjs';

Drag-and-drop reordering with signals in Angular

drag-and-drop signals optimistic-update

Intermediate 8 steps

python

from django.core.cache import cache
from django.core.cache.utils import make_template_fragment_key
from django.db.models.signals import post_save, post_delete
from django.dispatch import receiver

Busting template fragment caches in Django

caching signals cache-invalidation

Intermediate 4 steps

typescript

import { Injectable, signal, computed, effect, inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';
 
export type Theme = 'light' | 'dark';

A signal-based theme service in Angular

signals reactivity dependency-injection

Intermediate 7 steps

typescript

import { Component, inject, effect } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { toSignal } from '@angular/core/rxjs-interop';

Debounced search that syncs to the URL in Angular

signals reactive-forms debouncing

Advanced 8 steps

typescript

import { Injectable, computed, effect, signal } from '@angular/core';
 
export interface CartLine {
  id: string;

A signal-based cart store in Angular

signals reactivity computed-state

Intermediate 8 steps

typescript

import { Component, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RevenueChartComponent } from './revenue-chart.component';
import { ReportService, RevenueReport } from './report.service';

Deferred chart loading with @defer in Angular

lazy-loading signals dependency-injection

Intermediate 8 steps

python

import signal
import time
import logging

Graceful shutdown in a queue worker

signals graceful-shutdown message-queue

Intermediate 7 steps

typescript

import { Directive, ElementRef, HostBinding, HostListener, Input, inject, signal } from '@angular/core';
 
@Directive({
  selector: '[appCopyToClipboard]',

A copy-to-clipboard directive in Angular

directives host bindings clipboard api

Intermediate 9 steps

typescript

import { Component, computed, signal } from '@angular/core';
import { CdkTableModule } from '@angular/cdk/table';
import { CdkScrollableModule } from '@angular/cdk/scrolling';

Paginating a CDK table with Angular signals

signals computed-state pagination

Intermediate 9 steps

typescript

import { Component, input, computed } from '@angular/core';
 
function toNumber(value: number | string): number {
  return typeof value === 'number' ? value : parseFloat(value);

Signal inputs and computed in Angular

signals reactivity derived-state

Intermediate 5 steps

typescript

import { Injectable, signal, computed } from '@angular/core';
 
export type ToastKind = 'success' | 'error' | 'info' | 'warning';

Building a signal-based toast service in Angular

signals state-management dependency-injection

Intermediate 8 steps

typescript

import { Component, ChangeDetectionStrategy, inject, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { toObservable } from '@angular/core/rxjs-interop';

Virtual scrolling a contact list in Angular

virtual-scrolling signals change-detection

Intermediate 6 steps

typescript

@Component({
  selector: 'app-article-editor',
  templateUrl: './article-editor.component.html',
})

Autosaving a form with RxJS in Angular

reactive-forms rxjs-operators debouncing

Advanced 8 steps

go

package main
 
import (
	"context"

Graceful shutdown for a Gin server in Go

graceful-shutdown signals goroutines

Intermediate 6 steps