@Input() - Parent to Child

Relax. We'll talk through this in plain words — no textbook voice.

@Input() decorator is used to pass data from a parent component down to a child component.

typescript

// child.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <div class="child">
      <h3>{{ title }}</h3>
      <p>Age: {{ age }}</p>
    </div>
  `
})
export class ChildComponent {
  @Input() title: string = '';
  @Input() age: number = 0;
}

// parent.component.ts
@Component({
  selector: 'app-parent',
  template: `
    <app-child [title]="userName" [age]="userAge"></app-child>
  `
})
export class ParentComponent {
  userName = 'John Doe';
  userAge = 25;
}

You should see

(The child component receives 'John Doe' and 25 from the parent and displays them)