Angular는 TypeScript 기반의 프론트엔드 프레임워크로, 데이터의 양방향 또는 단방향 바인딩을 지원합니다. 데이터 바인딩은 HTML 템플릿과 컴포넌트의 뷰 및 모델 사이에 데이터를 전달하는 방법을 제공하여 사용자 인터페이스의 동적인 부분을 만드는 데 도움이 됩니다.

단방향 바인딩

Angular에서는 {{}} 구문을 사용하여 단방향 데이터 바인딩을 수행합니다. 이를 이용하면 컴포넌트의 속성 값을 HTML 템플릿에 출력할 수 있습니다.

export class MyComponent {
  message: string = 'Hello, Angular!';
}

<p>{{message}}</p>

위 예제에서 message 속성의 값인 ‘Hello, Angular!’가 HTML에 출력됩니다.

양방향 바인딩

양방향 데이터 바인딩을 위해서는 [(ngModel)] 디렉티브를 사용합니다. Form 요소와 함께 사용되며, 입력된 데이터를 컴포넌트의 속성에 업데이트하고 그 반대로도 적용됩니다.

export class MyComponent {
  username: string = '';
}

<input type="text" [(ngModel)]="username">
<p>Your username is: {{username}}</p>

위 예제에서는 사용자 입력을 username 속성에 양방향으로 바인딩하여 실시간으로 반영됩니다.

Angular에서 데이터 바인딩을 사용하면 동적이고 상호작용적인 사용자 인터페이스를 쉽게 구현할 수 있으며, 프론트엔드 개발을 보다 효과적으로 할 수 있습니다.

더 많은 정보를 원하시면 공식 Angular Documentation를 참고해보세요.