1. How Do You Pass Data from Parent to Child in Angular?

What is Parent-to-Child Data Passing?

In Angular, when a parent component needs to send data to a child component, we use an input property.

Modern Angular uses the input() API:

name = input<string>();

You will also commonly see the traditional @Input() decorator:

@Input()
name = '';

The basic flow is:

Parent Component
      │
      │ Property Binding
      │ [name]="productName"
      ▼
Child Component
      │
      │ input()
      ▼
Child Template

Why Do We Need It?

Components should be small and reusable.

Suppose ProductList retrieves product information and Product is responsible for displaying an individual product.

ProductList
   Parent
     │
     │ Product data
     ▼
Product
   Child

The child should not need to retrieve the same data again. The parent can simply pass the required data to it.

Purpose

Parent-to-child communication is useful when:

• Parent owns or retrieves the data.
• Child needs that data to display UI.
• The same child component should display different data.
• We want reusable child components.
• We want a clear one-way data flow.

For example:

ProductList
     │
     ├── Laptop ──► Product
     ├── Mobile ──► Product
     └── Tablet ──► Product

The same Product component can display different products depending on the input it receives.

Code Sample – Modern Angular

Suppose we have:

ProductList → Parent
Product     → Child

Parent Component

product-list.ts

import { Component } from '@angular/core';
import { Product } from '../product/product';

@Component({
  selector: 'app-product-list',
  imports: [Product],
  templateUrl: './product-list.html'
})
export class ProductList {

  productName = 'Laptop';
}

product-list.html

<h1>Product List</h1>

<app-product
  [name]="productName">
</app-product>

Child Component

product.ts

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

@Component({
  selector: 'app-product',
  templateUrl: './product.html'
})
export class Product {

  name = input<string>();
}

product.html

<h2>{{ name() }}</h2>

Output:

Laptop

Code Explanation

Step 1 – Parent Has the Data

The parent contains:

productName = 'Laptop';

So currently:

ProductList

productName
    │
    ▼
 "Laptop"

Step 2 – Parent Uses the Child

The parent template contains:

<app-product></app-product>

This creates the Product child component.

Step 3 – Child Declares an Input

Inside the child:

name = input<string>();

This tells Angular that name can receive a value from the component's parent.

string specifies the expected data type.

Step 4 – Parent Passes the Value

The parent uses property binding:

<app-product
  [name]="productName">
</app-product>

Here:

name          → Child input property

productName   → Parent property

Therefore:

[name]="productName"
   │          │
   │          └── Parent property
   │
   └── Child input

Angular evaluates productName:

productName = 'Laptop';

and passes:

Laptop

to the child's name.

Step 5 – Child Uses the Value

Because signal-based inputs are signals, the child reads the value by calling it:

<h2>{{ name() }}</h2>

The complete flow is:

Parent: ProductList

productName = "Laptop"
        │
        │
        │ [name]="productName"
        ▼
Child: Product

name = input<string>()
        │
        ▼
     name()
        │
        ▼
      Laptop

Passing an Object

In real applications, we usually pass an object rather than individual properties.

Suppose:

export interface ProductModel {
  id: number;
  name: string;
  price: number;
}

Parent

export class ProductList {

  product: ProductModel = {
    id: 1,
    name: 'Laptop',
    price: 50000
  };
}

Parent template:

<app-product
  [product]="product">
</app-product>

Child

export class Product {

  product = input<ProductModel>();
}

Child template:

@if (product(); as item) {
  <h2>{{ item.name }}</h2>
  <p>₹{{ item.price }}</p>
}

Flow:

Parent
   │
   │ Product Object
   │
   ▼
{
 id: 1,
 name: "Laptop",
 price: 50000
}
   │
   ▼
Child

This is a very common real-world pattern.

Passing Multiple Values

A child can have multiple inputs.

Child

export class Product {

  name = input<string>();
  price = input<number>();
  available = input<boolean>();
}

Parent:

export class ProductList {

  productName = 'Laptop';
  productPrice = 50000;
  inStock = true;
}

Parent HTML:

<app-product
  [name]="productName"
  [price]="productPrice"
  [available]="inStock">
</app-product>

Required Inputs

If the child must receive a particular value, Angular supports required inputs.

name = input.required<string>();

Parent must provide it:

<app-product
  [name]="productName">
</app-product>

This is useful when the child cannot work correctly without the value.

For example:

product = input.required<ProductModel>();

Then the child can safely expect a product to be supplied.

Default Values

An input can also have a default value.

quantity = input(1);

If the parent doesn't provide quantity, its value is:

1

If the parent provides:

<app-product
  [quantity]="5">
</app-product>

then the value becomes:

5

Traditional @Input() Approach

Before the newer signal-based input() API, Angular commonly used the @Input() decorator.

It remains important because you will see it extensively in existing applications.

Child

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

@Component({
  selector: 'app-product',
  template: `
    <h2>{{ name }}</h2>
  `
})
export class Product {

  @Input()
  name = '';
}

Parent:

export class ProductList {
  productName = 'Laptop';
}

Parent HTML:

<app-product
  [name]="productName">
</app-product>

Notice an important difference.

Traditional @Input()

Child HTML:

{{ name }}

Signal-based input()

Child HTML:

{{ name() }}

Because input() returns an input signal.

2. What Are Input Properties?

What is an Input Property?

An input property is a property of a child component that Angular exposes so that its parent component can supply a value to it.

Modern Angular:

name = input<string>();

Traditional Angular:

@Input()
name = '';

Conceptually:

Normal Child Property
      │
      │ Make it an input
      ▼
Input Property
      ▲
      │
Parent can supply value

Normal Property vs Input Property

Consider:

export class Product {
  name = 'Laptop';
}

name is simply an internal property.

The parent cannot use it as a component input merely because the property exists.

By defining:

name = input<string>();

we expose it as an Angular input.

Now the parent can use:

<app-product
  [name]="productName">
</app-product>

Input Property Syntax

Modern Angular:

propertyName = input<DataType>();

Example:

name = input<string>();
price = input<number>();
available = input<boolean>();

Required:

product = input.required<ProductModel>();

Default value:

quantity = input(1);

Property Binding Is Important

Consider:

<app-product
  [price]="productPrice">
</app-product>

The square brackets:

[ ]

represent property binding.

Angular evaluates:

productPrice

and passes its current value to the child.

Static Value vs Property Binding

This distinction is important.

Static String

<app-product name="Laptop"></app-product>

This passes the literal string:

Laptop

Property Binding

<app-product
  [name]="productName">
</app-product>

Angular evaluates:

productName

If:

productName = 'Laptop';

the child receives:

Laptop

If the parent's value later changes, Angular's binding updates the child accordingly.

Why Are Input Properties Important?

Suppose we hard-code:

export class Product {
  name = 'Laptop';
}

Every instance effectively starts with that internal value.

Instead, with an input:

name = input<string>();

we can reuse the component:

<app-product name="Laptop"></app-product>

<app-product name="Mobile"></app-product>

<app-product name="Tablet"></app-product>

Conceptually:

             Product Component
              /      |      \
             /       |       \
         Laptop    Mobile    Tablet

This makes components configurable and reusable.

Advantages

Reusability

The same child component can receive different values.

Clear Data Flow

Data flows clearly:

Parent → Child

Loose Coupling

The child doesn't need to know where the parent obtained the data.

Type Safety

We can specify:

input<string>()
input<number>()
input<ProductModel>()

Required Inputs

Modern Angular can enforce required component inputs:

product = input.required<ProductModel>();

Reactive Behavior

Signal-based inputs integrate naturally with Angular's signal-based reactive model.

Disadvantages

Too Many Inputs

A component with many inputs:

name = input<string>();
price = input<number>();
description = input<string>();
image = input<string>();
stock = input<number>();
rating = input<number>();
category = input<string>();

may become difficult to maintain.

Sometimes passing a model is cleaner:

product = input.required<ProductModel>();

Deep Component Hierarchies

Passing data through many levels can become cumbersome:

App
 ↓
ProductPage
 ↓
ProductList
 ↓
ProductCard
 ↓
ProductDetails

If several intermediate components only forward the data, another state-management approach may be more appropriate.

One-Way Direction

Inputs are primarily designed for:

Parent → Child

For child-to-parent communication, use an output.

input() vs @Input()

You should understand both, especially for interviews and maintenance of existing Angular applications.

Key Points

• Parent-to-child communication uses input properties.
• Modern Angular provides:

input()

• Traditional Angular uses:

@Input()

• The parent usually supplies the value through property binding:

<app-child
  [name]="parentName">
</app-child>

• [name] represents the child input.
• parentName represents the parent expression/property.
• Signal inputs are read using:

name()

• A required input can be declared using:

product = input.required<Product>();

• Input properties provide one-way parent → child data flow.

The most important diagram to remember is:

        PARENT COMPONENT

productName = "Laptop"
        │
        │
        │ [name]="productName"
        ▼

        CHILD COMPONENT

name = input<string>()
        │
        ▼
      name()
        │
        ▼
      Laptop

Interview Questions & Answers

Q1. How do you pass data from parent to child in Angular?

Use an input property in the child and property binding in the parent.

Child:

name = input<string>();

Parent:

<app-child [name]="productName"></app-child>

Q2. What is an input property?

An input property is a child component property that is exposed so its parent can provide data to it.

name = input<string>();

Q3. What does [name]="productName" mean?

[name]="productName"

means:

name          → Child input

productName   → Parent property

Angular evaluates the parent's productName and supplies its value to the child's name input.

Q4. What is the difference between name="Laptop" and [name]="productName"?

name="Laptop"

passes the literal string "Laptop".

[name]="productName"

evaluates the parent's productName expression and passes its value.

Q5. How do you make an input mandatory?

With signal-based inputs:

product = input.required<ProductModel>();

This indicates that the parent is required to provide the input.

Q6. Can we pass objects through an input?

Yes.

Parent:

<app-product
  [product]="selectedProduct">
</app-product>

Child:

product = input.required<ProductModel>();

Objects, arrays, strings, numbers, booleans, and other typed values can all be passed.

Q7. What is the difference between input() and @Input()?

Both allow parent-to-child communication. input() is the newer signal-based API, while @Input() is the decorator-based API widely used in existing Angular applications.

Q8. Is an input used for child-to-parent communication?

No. Input primarily represents:

Parent → Child

For:

Child → Parent

use an output, such as output() or the traditional @Output() with EventEmitter.

Interview-Ready Answer

Data is passed from a parent component to a child component using input properties. In modern Angular, the child can define an input using input() or input.required(), while existing applications commonly use @Input(). The parent supplies the value using property binding, for example [name]="productName". This provides a clear one-way data flow from parent to child.