Angular's input() Function: Passing Data to Components

Why it exists

Components need a way to receive data from their parents to be reusable. Hardcoding data inside a component limits its use to one specific context. The input function provides a formal, type-safe contract for passing data down the component tree, making components configurable and dynamic.

The mental model

An input is a one-way data channel from a parent component to a child. Think of it as setting the initial properties or "props" of a component when you use it in a template. The parent owns the data; the child receives a read-only signal representing that data. This is the modern, signal-based replacement for the older @Input() decorator.

How it works

You declare an input by initializing a component property with the input() function from @angular/core. For example, value = input(0); creates a number input with a default value of 0. The function returns an InputSignal, which is a read-only signal. To get the current value, you call the property as a function: this.value(). You can make an input mandatory with input.required<Type>(), which causes a build error if the parent doesn't provide a value in the template. You can also provide a transform function to process the value, like trimming a string, before it's used in the component.

When to use it

Use inputs whenever a child component needs data from its parent to render or perform its logic. This is the primary mechanism for top-down component communication. Use it to pass a user object to a UserProfileComponent, an array of items to a ListComponent, or a configuration object to a ChartComponent.

When not to use it

Do not use inputs for a child to send data up to a parent. For that, use @Output() and event emitters. Also, avoid using inputs for a child to directly modify the data it receives. The data flow is one-way (down). If a change is needed, the child should notify the parent to make the change, which will then pass the new value back down through the input.

One canonical example

A parent component wants to set the starting value of a custom slider component.

Parent Template: <custom-slider [value]="50" />

Child Component (custom-slider.ts):

import { Component, input } from '@angular/core';
@Component({ selector: 'custom-slider', ... })
export class CustomSlider {

value = input(0); // Declares a number input with a default of 0 // To read it inside a method: console.log(this.value()); }

Here, the CustomSlider component receives the value 50 from its parent. If the parent hadn't provided a value, it would default to 0.