Suggest an edit

Improve this article

Refine the answer for “How do you pass state between a parent and a child component?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

State between a parent and a child component is passed through **@Input** and **@Output** - the standard communication mechanism in Angular.

---

### 1. Passing *down* - through `@Input`

The parent gives data to the child:

```ts
// parent template
<app-child [count]="parentCount"></app-child>
```

```ts
// in the child component
@Input() count!: number;
```

---

### 2. Passing *up* - through `@Output` and `EventEmitter`

The child component notifies the parent about changes:

```ts
// in the child component
@Output() increment = new EventEmitter<void>();

someMethod() {
  this.increment.emit();
}
```

```html

<app-child (increment)="handleIncrement()"></app-child>
```

---

### 3. An alternative - a shared service

If components are hard to connect directly (or sit deeper in the hierarchy), you can use a shared service with a `signal`, `BehaviorSubject`, or `store`.

---

**Conclusion:**

- *@Input* - to **give a value**
- *@Output* - to **get a reaction**
- a shared service - when you need to **share state across multiple levels or branches** of the component tree.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts168 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.