Angular › Components & Templates

How do you pass data into a component from its parent using an input property?

Advanced

Answer

You mark a class property with the Input decorator, or use the newer input function, letting a parent component pass a value down through an attribute in the template, which the child component can then use directly inside its own template or logic.

@Component({
  selector: 'app-user-card',
  template: `<p>{{ name }} is {{ age }} years old</p>`
})
export class UserCardComponent {
  @Input() name!: string;
  @Input() age!: number;
}

// Used by a parent as:
// <app-user-card [name]="'Alice'" [age]="30"></app-user-card>

Real-world example A parent dashboard page passes a specific user's name and age down to a reusable UserCardComponent, letting the same card component display different information for every different user.

Common follow-ups: What happens if a required input is never provided by the parent component?;How does the newer signal based input function differ from the traditional Input decorator?

Angular Signals;Data Binding