Signal Inputs and Outputs

Signal-based inputs and outputs provide reactive component APIs without decorator boilerplate.

input() — Reactive Input

import { Component, input } from '@angular/core';

@Component({
  selector: 'app-card',
  template: `
    <div class="card">
      <h3>{{ title() }}</h3>
      <p>{{ description() }}</p>
    </div>
  `,
})
export class CardComponent {
  title = input<string>('Untitled');
  description = input<string>('');
  variant = input<'primary' | 'secondary'>('primary');
}

<app-card [title]="cardTitle" [description]="cardDescription"></app-card>

input.required() — Mandatory Input

@Component({
  selector: 'app-alert',
  template: `<div class="alert">{{ message() }}</div>`,
})
export class AlertComponent {
  message = input.required<string>();
}

If a parent does not provide a required input, Angular throws a compile-time error.

output() — Typed Events

import { Component, output } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<button (click)="selected.emit('user-123')">Select</button>`,
})
export class ChildComponent {
  selected = output<string>();
}

<app-child (selected)="onSelected($event)"></app-child>

model() — Two-Way Binding

import { Component, model } from '@angular/core';

@Component({
  selector: 'app-counter',
  template: `
    <button (click)="count.update(c => c - 1)">-</button>
    <span>{{ count() }}</span>
    <button (click)="count.update(c => c + 1)">+</button>
  `,
})
export class CounterComponent {
  count = model<number>(0);
}

<app-counter [(count)]="parentCount"></app-counter>

This is equivalent to:

<app-counter [count]="parentCount" (countChange)="parentCount = $event"></app-counter>

Signal-based APIs can be adopted incrementally alongside existing @Input/@Output decorators.

Migration Comparison

Input with Transform

import { Component, input, booleanAttribute } from '@angular/core';

@Component({
  selector: 'app-toggle',
  template: `<span [class.active]="isActive()">Toggle</span>`,
})
export class ToggleComponent {
  isActive = input(false, { transform: booleanAttribute });
}

<app-toggle [isActive]="true"></app-toggle>
<app-toggle isActive></app-toggle>

Input with Alias

@Component({
  selector: 'app-user-avatar',
  template: `<img [src]="avatarUrl()" [alt]="altText()">`,
})
export class UserAvatarComponent {
  avatarUrl = input<string>(undefined, { alias: 'src' });
  altText = input<string>('Avatar', { alias: 'alt' });
}

<app-user-avatar [src]="user.imageUrl" [alt]="user.name"></app-user-avatar>

When to Use Signals vs Decorators

• New components — prefer signal-based APIs
• Existing components — @Input/@Output work fine; migrate incrementally
• Library authors — signal APIs work in both standalone and NgModule contexts