Angular Input/Output Signals: The New Component Communication

Angular 17 brings a lot of brand-new features. Some focus on performance, others on tooling and build improvements, but perhaps one of the most exciting enhancements is in component interaction. This version officially introduces signals — a revolutionary way of managing reactivity in Angular applications.

In this article, we’ll explore how to use signals for parent-child component communication. We’ll dive into what signals are, how they simplify inputs and outputs, and the additional features they bring to the table.

What Are Signals?

At their core, signals are wrappers around a value that notify any interested consumers whenever that value changes. This means that when a signal is updated, Angular efficiently tracks where it’s used and optimally re-renders only the affected parts of the DOM. The result? A highly reactive and performance-optimized framework.

While we won’t dive deeply into the fundamentals of signals, this article focuses on how signals transform parent-child component interaction, enabling a cleaner, more reactive way of working with inputs and outputs.

The New Approach With Inputs

Traditionally, passing data from a parent to a child component in Angular relies on the @Input decorator. With signals, Angular offers a new way to define inputs using InputSignal. Let’s explore this with an example:

// child.component.ts

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

@Component({
  selector: 'app-child',
  template: `
    <div>{{ carBrand() }}</div>
    <div>{{ carModel() }}</div>
  `,
  standalone: true,
})
export class ChildComponent {
  public carBrand: InputSignal<string> = input<string>();
  public carModel: InputSignal<string> = input<string>('');
}

In this example, carBrand and carModel are declared as InputSignal properties. Signals, unlike traditional inputs, are read-only by default and accessed like functions. The parent component can pass data to these inputs just like before:

// parent.component.ts

import { Component } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
  selector: 'app-parent',
  template: `
    <app-child [carBrand]="'Porsche'" [carModel]="'Cayenne'"></app-child>
  `,
  standalone: true,
  imports: [ChildComponent],
})
export class ParentComponent {}

Also, we can mark an input as a required input. It can be helpful in case you want to obligate a consumer component to pass the data your child component needs:

public carBrand: InputSignal<string> = input.required<string>();

If the parent omits this input, Angular will throw an error, ensuring component integrity:

Missing binding for required input **carBrand** of component **ChildComponent**.

The New Outputs

The traditional way to send data from a child to a parent component involves the @Output decorator with EventEmitter. Signals introduce OutputEmitterRef, a signal-based mechanism for handling outputs. Let’s look at an example:

// child.component.ts

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

@Component({
  selector: 'app-child',
  template: `
    <div>{{ carBrand() }}</div>
    <div>{{ carModel() }}</div>
    <button (click)="chooseCar.emit({ carBrand: carBrand(), carModel: carModel() })">
      Choose a Car
    </button>
  `,
  standalone: true,
})
export class ChildComponent {
  public carBrand: InputSignal<string> = input.required<string>();
  public carModel: InputSignal<string> = input<string>('');
  public chooseCar: OutputEmitterRef<{ carBrand: string; carModel: string }> = output<{
    carBrand: string;
    carModel: string;
  }>();
}

The parent component can handle this output in a familiar way:

// parent.component.ts

@Component({
  selector: 'app-parent',
  template: `
    <app-child
      [carBrand]="'Porsche'"
      [carModel]="'Cayenne'"
      (chooseCar)="chooseCardHandler($event)">
    </app-child>
  `,
  standalone: true,
  imports: [ChildComponent],
})
export class ParentComponent {
  public chooseCardHandler(carInfo: { carBrand: string; carModel: string }): void {
    console.log(carInfo);
  }
}

This new output mechanism retains the simplicity of traditional outputs while integrating seamlessly with Angular’s reactive ecosystem.

Benefits of Signals for Inputs and Outputs

One of the biggest advantages of using signals for inputs is their inherent reactivity. Each time an input value changes, Angular automatically marks the component for updates during the next change detection cycle. However, unlike traditional mechanisms, signals optimize this process by only updating the specific parts of the DOM that depend on the changed value.

With signals, there’s no longer a need for OnChanges. For example, you can use input signals with the computed function to dynamically calculate derived values. Let’s say we want to combine the car model and brand into a single field — this can now be achieved reactively:

import { Component, computed, effect, input, InputSignal, output, OutputEmitterRef, Signal } from '@angular/core';

@Component({
    selector: 'app-child',
    template: `
        <div>{{ carBrand() }}</div>
        <div>{{ carModel() }}</div>
        <button (click)="chooseCar.emit({ carBrand: carBrand(), carModel: carModel() })">
            Choose a Car ({{ carFullName() }})
        </button>
    `,
    standalone: true,
})
export class ChildComponent {
    public carBrand: InputSignal<string> = input.required<string>();
    public carModel: InputSignal<string> = input<string>('', { alias: 'customCarModel' });
    public chooseCar: OutputEmitterRef<{ carBrand: string; carModel: string }> = output<{
        carBrand: string;
        carModel: string;
    }>();

    public carFullName: Signal<string> = computed(() => `${this.carModel()} ${this.carBrand()}`);
}

Each time the carBrand or carModel inputs change, the computed signal recalculates the value and carFullName holds the computed value.

Signals also simplify handling side effects. By using the effect function, we can execute logic whenever an input value changes. For example, imagine you need to send analytics data whenever the carBrand input changes. effect function automatically triggers whenever the dependent input changes, eliminating the need for complex manual handling:

import { Component, computed, effect, input, InputSignal, output, OutputEmitterRef, Signal } from '@angular/core';

@Component({
    selector: 'app-child',
    template: `
        <div>{{ carBrand() }}</div>
        <div>{{ carModel() }}</div>
        <button (click)="chooseCar.emit({ carBrand: carBrand(), carModel: carModel() })">
            Choose a Car ({{ carFullName() }})
        </button>
    `,
    standalone: true,
})
export class ChildComponent {
    public carBrand: InputSignal<string> = input.required<string>();
    public carModel: InputSignal<string> = input<string>('', { alias: 'customCarModel' });
    public chooseCar: OutputEmitterRef<{ carBrand: string; carModel: string }> = output<{
        carBrand: string;
        carModel: string;
    }>();

    public carFullName: Signal<string> = computed(() => `${this.carModel()} ${this.carBrand()}`);

    constructor() {
        effect(() => {
            this.sendAnalytics(this.carBrand());
        });
    }

    private sendAnalytics(carBrand: string): void {
        // perform sending analytics
    }
}

Notably, effect ensures that actions are performed only when necessary (only when the signal in effect function is changed) and always reflects the most up-to-date state.

Another significant benefit is memoization. Signals cache their computed values and only recalculate them when dependencies change. All of these simplify the development flow and can enhance the application performance.

Conclusion

The introduction of input and output signals in Angular represents a major step forward in how we manage component communication. We gain a more reactive and efficient approach to passing and receiving data, significantly reducing the boilerplate and complexity that traditional methods often require. This innovation doesn’t just enhance developer experience — it also brings performance benefits.

If you’re working on modern Angular applications, this is the perfect opportunity to explore signals and see how they can simplify your workflow. Start by replacing traditional @Input and @Output with signal-based alternatives in your components. Experiment with features like computed and effect to create reactive and maintainable logic, and explore transformers to customize your data flow effortlessly.