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

@Input() message: string;

Means:

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

Basic Example

Parent Component (Sender)

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

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

Child Component (Receiver)

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

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

Output

Hello World

Why `@Input()` is Needed

Without @Input():

text: string; // Angular will NOT bind this

Angular blocks external binding for safety.

@Input() explicitly allows it.

How Data Flows

Parent Component
   ↓
@Input() Property
   ↓
Child Component

One-way data flow (parent → child).

Chat App Example (Realistic)

Parent (Chat Window)

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

Child (Chat Bubble)

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

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

`@Input()` with Alias

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

Usage:

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

Useful when:

Renaming properties
Avoiding reserved words

`@Input()` with Setter (Advanced)

Used for validation or transformation.

private _message!: string;

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

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

Lifecycle & `@Input()`

Important lifecycle hooks:

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.

interview

What is @Input() in angular?

Can you answer this question?

1 Answers

What is @Input()?