Front-endAngular

Data Binding

⏱ 읽기 소요 시간: 2 분
  • 처음 Angular를 접했을 때, 단방향 바인딩인 React와는 다르게
  • Angular는 데이터 바인딩이 단방향과 양방향을 지원하고 있어
    색다른 면을 느꼈다.

Angular에서 제공하는 데이터 바인딩에 대해 알아보자.
아래의 표는 이웅모님의 Angular Essentials의 데이터 바인딩에 대한 표 정리한 내용이다.

Data Binding Data Binding Expression
Interporlation Component Class => Template
Property Binding Component Class => Template [property]=”expression”
Attribute Binding Component Class => Template [attr.attribute-name]=”expression”
Class Binding Component Class => Template [class.class-name]=”expression”
Style Binding Component Class => Template [style.style-name]=”expression”
Event Binding Component Class <= Template (event)=”statement”
Two-way Data Binding Component Class <=> Template [(ngModel)]=”property”

참고 링크

Share