---
title: "What is @Input() in angular?"  
description: "What is @Input() in angular?"  
author: "Anubhav Sharma"  
published: 2025-12-17  
updated: 2025-12-17  
canonical: https://www.mindstick.com/interview/34425/what-is-input-in-angular  
category: "technology"  
tags: ["angular js"]  
reading_time: 4 minutes  

---

# What is @Input() in angular?

## What is `@Input()`?

`@Input()` is an **Angular decorator** that allows a **parent component to pass data to a child component**.

Think of it like:

> **MVC ViewModel → Partial View**, but on the **client side**.

## Simple Meaning

```javascript
@Input() message: string;
```

Means:

> “This component expects `message` to come **from outside** (parent component).”

## Basic Example

### Parent Component (Sender)

```html
<chat-message [text]="lastMessage"></chat-message>
```

```javascript
export class ChatComponent {
  lastMessage = 'Hello World';
}
```

### Child Component (Receiver)

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

@Component({
  selector: 'chat-message',
  template: `<p>{{ text }}</p>`
})
export class ChatMessageComponent {
  @Input() text!: string;
}
```

### Output

```plaintext
Hello World
```

## Why `@Input()` is Needed

Without `@Input()`:

```plaintext
text: string; // Angular will NOT bind this
```

Angular **blocks external binding** for safety.

`@Input()` explicitly allows it.

## How Data Flows

```plaintext
Parent Component
   ↓
@Input() Property
   ↓
Child Component
```

**One-way data flow** (parent → child).

## Chat App Example (Realistic)

### Parent (Chat Window)

```html
<chat-bubble
  [user]="msg.sender"
  [message]="msg.text"
  [isMine]="msg.senderId === myId">
</chat-bubble>
```

### Child (Chat Bubble)

```javascript
export class ChatBubbleComponent {
  @Input() user!: string;
  @Input() message!: string;
  @Input() isMine!: boolean;
}
```

```html
<div [class.mine]="isMine">
  <b>{{ user }}</b>
  <p>{{ message }}</p>
</div>
```

## `@Input()` with Alias

```javascript
@Input('msgText') message!: string;
```

Usage:

```html
<chat-bubble [msgText]="msg.text"></chat-bubble>
```

Useful when:

- Renaming properties
- Avoiding reserved words

## `@Input()` with Setter (Advanced)

Used for validation or transformation.

```plaintext
private _message!: string;

@Input()
set message(val: string) {
  this._message = val.trim();
}

get message(): string {
  return this._message;
}
```

## Lifecycle & `@Input()`

Important lifecycle hooks:

```plaintext
ngOnChanges(changes: SimpleChanges) {
  if (changes['message']) {
    console.log('Message changed');
  }
}
```

Runs when:

- Parent updates input value
- SignalR pushes a new message

## `@Input()` vs `@Output()`

| Feature | @Input() | @Output() |
| --- | --- | --- |
| Direction | Parent → Child | Child → Parent |
| Purpose | Data binding | Event emitting |
| Type | Property | EventEmitter |

## Key Takeaway

> `@Input()` is Angular’s **safe, explicit way to accept data from a parent component**.

## Answers

### Answer by Anubhav Sharma

## What is `@Input()`?

`@Input()` is an **Angular decorator** that allows a **parent component to pass data to a child component**.

Think of it like:

> **MVC ViewModel → Partial View**, but on the **client side**.

## Simple Meaning

```javascript
@Input() message: string;
```

Means:

> “This component expects `message` to come **from outside** (parent component).”

## Basic Example

### Parent Component (Sender)

```html
<chat-message [text]="lastMessage"></chat-message>
```

```javascript
export class ChatComponent {
  lastMessage = 'Hello World';
}
```

### Child Component (Receiver)

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

@Component({
  selector: 'chat-message',
  template: `<p>{{ text }}</p>`
})
export class ChatMessageComponent {
  @Input() text!: string;
}
```

### Output

```plaintext
Hello World
```

## Why `@Input()` is Needed

Without `@Input()`:

```plaintext
text: string; // Angular will NOT bind this
```

Angular **blocks external binding** for safety.

`@Input()` explicitly allows it.

## How Data Flows

```plaintext
Parent Component
   ↓
@Input() Property
   ↓
Child Component
```

**One-way data flow** (parent → child).

## Chat App Example (Realistic)

### Parent (Chat Window)

```html
<chat-bubble
  [user]="msg.sender"
  [message]="msg.text"
  [isMine]="msg.senderId === myId">
</chat-bubble>
```

### Child (Chat Bubble)

```javascript
export class ChatBubbleComponent {
  @Input() user!: string;
  @Input() message!: string;
  @Input() isMine!: boolean;
}
```

```html
<div [class.mine]="isMine">
  <b>{{ user }}</b>
  <p>{{ message }}</p>
</div>
```

## `@Input()` with Alias

```javascript
@Input('msgText') message!: string;
```

Usage:

```html
<chat-bubble [msgText]="msg.text"></chat-bubble>
```

Useful when:

- Renaming properties
- Avoiding reserved words

## `@Input()` with Setter (Advanced)

Used for validation or transformation.

```plaintext
private _message!: string;

@Input()
set message(val: string) {
  this._message = val.trim();
}

get message(): string {
  return this._message;
}
```

## Lifecycle & `@Input()`

Important lifecycle hooks:

```plaintext
ngOnChanges(changes: SimpleChanges) {
  if (changes['message']) {
    console.log('Message changed');
  }
}
```

Runs when:

- Parent updates input value
- SignalR pushes a new message

## `@Input()` vs `@Output()`

| Feature | @Input() | @Output() |
| --- | --- | --- |
| Direction | Parent → Child | Child → Parent |
| Purpose | Data binding | Event emitting |
| Type | Property | EventEmitter |

## Key Takeaway

> `@Input()` is Angular’s **safe, explicit way to accept data from a parent component**.


---

Original Source: https://www.mindstick.com/interview/34425/what-is-input-in-angular

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.