typescript 55 lines · 8 steps

Drag-and-drop reordering with signals in Angular

A standalone Angular component reorders tasks via CDK drag-drop, updates signals optimistically, and rolls back if the save fails.

Explained by highlit

Angular Intermediate drag-and-drop signals optimistic-update rollback standalone-components

1import { Component, inject, signal } from '@angular/core';
2import { CdkDragDrop, DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop';
3import { HttpClient } from '@angular/common/http';
4import { finalize } from 'rxjs';
5 
6interface Task {
7  id: string;
8  title: string;
9  position: number;
10}
11 
12@Component({
13  selector: 'app-task-list',
14  standalone: true,
15  imports: [DragDropModule],
16  template: `
17    <ul cdkDropList (cdkDropListDropped)="drop($event)" class="task-list">
18      @for (task of tasks(); track task.id) {
19        <li cdkDrag class="task" [class.saving]="saving()">
20          <span cdkDragHandle class="handle">≡</span>
21          {{ task.title }}
22        </li>
23      }
24    </ul>
25  `,
26})
27export class TaskListComponent {
28  private readonly http = inject(HttpClient);
29 
30  readonly tasks = signal<Task[]>([]);
31  readonly saving = signal(false);
32 
33  drop(event: CdkDragDrop<Task[]>): void {
34    if (event.previousIndex === event.currentIndex) return;
35 
36    const previous = this.tasks();
37    const reordered = [...previous];
38    moveItemInArray(reordered, event.previousIndex, event.currentIndex);
39    this.tasks.set(reordered.map((task, index) => ({ ...task, position: index })));
40 
41    this.persistOrder(this.tasks(), previous);
42  }
43 
44  private persistOrder(next: Task[], rollback: Task[]): void {
45    this.saving.set(true);
46    const payload = next.map(({ id, position }) => ({ id, position }));
47 
48    this.http
49      .patch('/api/tasks/reorder', { tasks: payload })
50      .pipe(finalize(() => this.saving.set(false)))
51      .subscribe({
52        error: () => this.tasks.set(rollback),
53      });
54  }
55}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Signals give you reactive state that the template re-renders from automatically when you call set.
2Optimistic UI updates feel instant but need a saved snapshot to restore on failure.
3finalize runs on both success and error, making it the right place to clear a loading flag.

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