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 ```ts 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 ```html <app-user-card [name]="userName" [role]="userRole"></app-user-card> ``` ```ts 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.