Code Explainers

Code explainers tagged #signals

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
typescript 
import { Injectable, computed, inject, signal } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { firstValueFrom } from 'rxjs';
 

Optimistic updates with Angular signals

signals optimistic-updates state-management
Intermediate 9 steps
typescript 
import { Injectable, signal, computed } from '@angular/core';
import {
  HttpInterceptorFn,
  HttpContextToken,

Tracking HTTP loading state in Angular

signals http-interceptor reference-counting
Intermediate 8 steps
typescript 
import { Component, computed, inject, signal } from '@angular/core';
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
import { CommonModule } from '@angular/common';
 

Building a signup stepper in Angular

signals reactive-forms form-validation
Intermediate 10 steps
python 
from django.conf import settings
from django.contrib.auth import get_user_model
from django.core.mail import EmailMultiAlternatives
from django.db.models.signals import post_save

Sending a welcome email with Django signals

signals email user-activation
Intermediate 8 steps
go 
package main
 
import (
	"context"

Graceful HTTP shutdown in Go

graceful-shutdown signals goroutines
Intermediate 8 steps