Angular는 프로퍼티 바인딩을 통해 컴포넌트와 템플릿간에 데이터를 쉽게 전달할 수 있습니다.

프로퍼티 바인딩이란?

프로퍼티 바인딩은 컴포넌트의 프로퍼티와 템플릿의 HTML 요소의 속성을 연결하는 것입니다.

예를 들어, 다음과 같이 name 속성을 가진 컴포넌트가 있다고 가정해봅시다.

<app-user [name]="user.name"></app-user>

여기서 app-user는 자식 컴포넌트를 가리키며, name 속성을 통해 user.name 값이 이를 통해 전달됩니다.

단방향 바인딩과 양방향 바인딩

• 단방향 바인딩: 데이터는 컴포넌트 -> 템플릿 또는 템플릿 -> 컴포넌트 로 흐르는 것을 말합니다.
• 양방향 바인딩: 데이터는 컴포넌트 <-> 템플릿 간에 양방향으로 흐릅니다.

사용법

단방향 바인딩

컴포넌트 -> 템플릿 바인딩은 {{ }} 를 사용합니다.

<p>{{ user.name }}</p>

템플릿 -> 컴포넌트 바인딩은 [ ] 를 사용합니다.

<input type="text" [value]="name">

양방향 바인딩

양방향 바인딩은 [( )]을 사용합니다.

<input type="text" [(ngModel)]="name">

사용 예

@Component({
  selector: 'app-user',
  template: `
    <p>{{ name }}</p>
    <input type="text" [value]="name">
    <input type="text" [(ngModel)]="name">
  `
})
export class UserComponent {
  @Input() name: string;
}

프로퍼티 바인딩을 사용하여 Angular 애플리케이션에서 데이터를 컴포넌트와 템플릿 간에 전달할 때 유용합니다.

자세한 내용은 Angular 공식 문서를 참조하세요.