Component Communication with @Input

Real apps are built by combining components. To pass data from a parent to a child, Angular uses @Input.

Step 1: Create a child component

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

@Component({
  selector: 'app-user-card',
  standalone: true,
  template: `
    <div class="card">
      <h3>{{ name }}</h3>
      <p>Role: {{ role }}</p>
    </div>
  `,
})
export class UserCardComponent {
  @Input() name = '';
  @Input() role = '';
}

Step 2: Use it in a parent component

<app-user-card [name]="userName" [role]="userRole"></app-user-card>

export class UsersPageComponent {
  userName = 'Amanda Scott';
  userRole = 'Frontend Developer';
}

Best practice

• Use clear input names
• Provide default values
• Keep child components “dumb” and reusable when possible

Next: Send events from child to parent using @Output.