Làm thế nào để truyền dữ liệu từ component cha xuống component con bằng input()?

Component con khai báo một input bằng hàm input(), còn component cha bind giá trị vào nó bằng dấu ngoặc vuông. Input là một signal, nên con đọc nó bằng cách gọi như hàm.

import { Component, input } from '@angular/core'

@Component({
  selector: 'app-user-card',
  template: `<h3>{{ name() }}</h3>`,
})
export class UserCard {
  name = input.required<string>()
}

@Component({
  selector: 'app-root',
  imports: [UserCard],
  template: `<app-user-card [name]="userName" />`,
})
export class App {
  userName = 'Linh'
}

Các bước cần nhớ:

• Import component con vào imports của component cha.
• Dùng [name]="expression" cho giá trị động, hoặc name="Linh" cho chuỗi cố định.
• Đọc input bằng name(). Component con không thể sửa nó, vì dữ liệu chảy xuống.

Code cũ dùng decorator @Input(). Nó vẫn chạy, nhưng code mới nên dùng input().

Dữ liệu đi xuống qua input, còn sự kiện đi lên qua output.