Angular Signal Inputs and Outputs

What is Signal Inputs and Outputs in Angular?

The input() and output() functions are the signal-based replacements for the @Input and @Output decorators. Inputs become signals you read by calling them, and required inputs are enforced by the type system.

Signal Inputs and Outputs example

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

@Component({ selector: 'app-job-card', standalone: true, template: `
  <h3>{{ job().title }}</h3>
  <p>{{ label() }}</p>
  <button (click)="applied.emit(job().id)">Apply</button>
` })
export class JobCardComponent {
  job = input.required<Job>();
  compact = input(false);

  label = computed(() => this.compact() ? this.job().company : this.job().description);

  applied = output<string>();
}

Key points to remember

• The template usage is unchanged — the parent still writes [job]="x" and (applied)="…".
• input.required<T>() removes the need for the definite assignment assertion.
• Inputs compose directly into computed values, replacing ngOnChanges in most cases.
• model() creates a two-way bindable signal input.

Common mistakes with Signal Inputs and Outputs

• Reading an input without parentheses inside the class.
• Mixing decorator inputs and signal inputs on the same component for no reason.