Guides

Experimental: layout and drag

Layout transitions, drag gestures, boolean targets and smooth scrolling are experimental — what they do, and why they have dedicated playgrounds instead of embedded ones.

Warning

Everything on this page is experimental. It may change significantly between minor versions. See API overview and stability for the exact list and the compatibility policy.

Drag

MoveDragDirective makes an element follow the pointer and settle with constraints, elastic edges, momentum, snap-to-origin or snap points. moveWhileDrag holds a state while the gesture is active (for example, lifting a card).

draggable.ts

@Component({
  selector: 'app-draggable',
  imports: [MoveDragDirective],
  template: `
    <div moveDrag="x" [moveDragSnapToOrigin]="true" [moveWhileDrag]="{ scale: [1, 1.05] }">
      Drag
    </div>
  `,
})
export class Draggable {}

View source

Drag depends on pointer capture, constraints measured from real layout and touch behaviour that a generic controls panel cannot represent. It has a dedicated surface: open the drag playground.

Layout

MoveLayoutDirective animates an element from where it was to where it is after a layout change, with a FLIP technique, and can share an identity between elements.

reorder.ts

@Component({
  selector: 'app-reorder',
  imports: [MoveLayoutDirective],
  template: `
    @for (item of items; track item) {
      <div moveLayout>{{ item }}</div>
    }
  `,
})
export class Reorder {
  protected readonly items = ['a', 'b', 'c'];
}

View source

Layout transitions need real DOM measurements across a re-render, so they are shown in the layout playground, not in a controls panel.

Targets and triggers

MoveTargetDirective plays forward while a boolean is true and reverses when it becomes false; MoveTriggerDirective resets or exposes an imperative handle. Prefer variants or MoveAnimator in stable code. See the target playground.

Smooth scroll

MoveSmoothScrollDirective and SmoothScrollService interpolate wheel and touch input on a scroll container. They change a basic browser behaviour, so they are opt-in and this site does not enable them globally. See the smooth-scroll playground.

Related: drag · layout · target · smooth scroll