Mastering Angular Component Communication: From @Input() to NgRx Store

From @Input() to NgRx — All You Need to Know About Talking Between Components

Non-Member? Click here to read for free

Communication between Angular components is a core part of app development. Whether it’s a child talking to a parent or unrelated components sharing data, mastering these patterns will make your code cleaner, scalable, and easier to debug.

Using @Input() — Passing Data from Parent to Child

The @Input() decorator allows a parent component to send data down to a child component.

How it works:

// child.component.ts
import { Component, Input } from '@angular/core';
@Component({
  selector: 'app-child',
  template: `<p>Hello {{ name }}!</p>`
})
export class ChildComponent {
  @Input() name!: string;
}

<!-- parent.component.html -->
<app-child [name]="name"></app-child>

Best for: One-way data flow when the parent knows what the child needs.

@Output() — Emitting Events from Child to Parent

Use @Output() with an EventEmitter to send data back from the child to the parent.

//…