Data_Binding

앵귤러로 선언적 프로그래밍을 하는 근간은 데이터 바인딩이다.

데이터 바인딩은 컴포넌트와 뷰사이에 연결 고리를 맺는 구체적인 방법이다.

1. 단방향 바인딩
   1. 삽입식
   2. 프로퍼티 바인딩
   3. 이벤트 바인딩
2. 양방향 바인딩

단방향 바인딩

1. 삽입식

• 문자열로 변환될 수 잇는 값을 뷰에 바인딩합니다.
• 사용예제

  \{\{  contents  }}
  \{\{  seomText()  }}

  //삽입식에 맞지 않다
  \{\{  contents + '?who=angular'  }}

  //잘 사용안함
  \{\{  1 + contents  }}

2. 프로퍼티 바인딩

• 문자 그대로 컴포넌트에서 DOM의 프로퍼티 로 값을 바인딩 합니다.
• 형태

  [DOM 프로퍼티] = "템플릿 표현식"

  //예제
  <img [src] = 'someImageUrl' [width] = '10 * 20'>

삽입식과 프로퍼티의 차이점

• 삽입식은 템플릿 표현식의 결과를 문자열로 치환
• 템플릿 표현식의 결과를 DOM의 프로퍼티에 그대로 바인딩

3. 이벤트 바인딩

• 뷰에서 발생하는 이벤트를 처리할 로직을 바인딩합니다.

  (이벤트 대상) = "템플릿 문장"

  //예제
  <button (click) = "printPotion($event)">확인</button>

양방향 바인딩 은 결국 단방향 바인딩이다

바인딩 중에서 가장 많이 쓰일 것으로 생각이 된다.

• 단방향 바인딩과 달리 뷰와 컴포넌트의 상태 변화를 상호 간에 반영해 줍니다.

  [(ngModel)] = "mySelection"

  //예제
  <input type="text" [(ngModel)] = "myData"/>

양방향이 결국에 단방향이다 라는 설명은 추후에 추가됩니다.