migrate

Angular 22+ Migration: $ARGUMENTS

If $ARGUMENTS is empty, ask the user for a component path or folder before proceeding.

Phase 1: Analyze

Read all files in the target path. For each component, directive, or service, scan for migration items below. If a folder is given, process all .ts and .html files within it.

What to migrate

Inputs / Outputs / Models:

• @Input() → input() or input.required()
• @Input() with setter → input() + linkedSignal() (preferred) or effect() (only for DOM side effects)
• @Input() + @Output() pair (e.g. value / valueChange) → model()
• @Output() → output()
• Boolean inputs: add { transform: booleanAttribute }
• Number inputs: add { transform: numberAttribute }

Host bindings:

• @HostBinding('class.x') → host: { '[class.x]': 'expr()' }
• @HostBinding('attr.x') → host: { '[attr.x]': 'expr()' }
• @HostBinding('style.x') → host: { '[style.x]': 'expr()' }
• @HostListener('event') → host: { '(event)': 'handler($event)' }

Queries:

• @ViewChild() → viewChild() or viewChild.required()
• @ViewChildren() → viewChildren()
• @ContentChild() → contentChild()
• @ContentChildren() → contentChildren()

Template syntax:

• *ngIf → @if
• *ngFor → @for (requires track expression)
• *ngSwitch / *ngSwitchCase → @switch / @case

State management:

• BehaviorSubject used for local component state → signal()
• BehaviorSubject + combineLatest → computed()
• Subject<void> used only to trigger side effects → effect()
• effect() that only calls signal.set() for derived state → computed() or linkedSignal
• Redundant markForCheck() after signal updates → remove
• Object/array mutation in place + signal.set() with same ref → immutable update with signal.update()

CSS class building:

• CssClassBuilder + @applyCssClass → computed() returning class string + host: { '[class]': '_cssClass()' }

Cleanup patterns: