Inputs — Passing Data Into Components

Modern Angular uses the input() function to declare signal-backed inputs that the parent can bind to with property syntax.

4 min read Level 2/5 #angular#components#inputs

What you'll learn

Declare with input() and input.required()
Use the input as a signal in the template
Compare with the legacy @Input() decorator

Inputs are how a parent passes data into a child component. Modern Angular replaces the @Input() decorator with a function called input() that returns a signal.

Declaring Inputs

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

@Component({
  selector: 'app-card',
  standalone: true,
  template: `<h2>{{ name() }}</h2><p>{{ tagline() }}</p>`,
})
export class CardComponent {
  name = input<string>('Anonymous');       // optional, with default
  tagline = input.required<string>();      // required — compile error if missing
}

Notice that name and tagline are signals — read them in the template with name(), not name.

Binding From the Parent

<app-card [name]="userName()" [tagline]="'JS fan'" />

Property binding works the same as before. The value can be a static expression or another signal read.

The Legacy Decorator

Older Angular code uses the @Input() decorator. It still works but is not signal-backed.

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

@Component({ selector: 'app-card', standalone: true, template: '{{ name }}' })
export class CardComponent {
  @Input() name = '';
  @Input({ required: true }) tagline!: string;
}

Prefer input() in new code — it integrates with effects, computeds, and OnPush change detection.

Outputs — Emitting Events to Parent →