앵귤러 데이터 바인딩

인터폴레이션

//템플릿에 작성
{{ expression }}

템플릿에서 사용하고,{{}} 중괄호 두개로 감싸는 형태이다. 대입연산자(=,+=,-=), 증감 연산자(++,--), 비트 연산자(|,&), 객체 생성연산자(new) 와 같이 클래스의 프로퍼티를 변경할 수 있는 연산은 금지된다. 이는 인터폴레이션뿐만 아니라 템플릿에서 사용하는 모든 표현식에 적용된다. 반환값은 문자열이다.

프로퍼티 바인딩

<element [property]="expression">...</element>

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <!-- input 요소의 value 프로퍼티에 컴포넌트 클래스의 name 프로퍼티 값을 프로퍼티 바인딩 -->
    <input type="text" [value]="name">

    <!-- p 요소의 innerHTML 프로퍼티에 컴포넌트 클래스의 contents 프로퍼티 값을 프로퍼티 바인딩 -->
    <p [innerHTML]="contents"></p>

    <!-- img 요소의 src 프로퍼티에 컴포넌트 클래스의 imageUrl 프로퍼티 값을 프로퍼티 바인딩 -->
    <img [src]="imageUrl"><br>

    <!-- button 요소의 disabled 프로퍼티에 컴포넌트 클래스의 isDisabled 프로퍼티 값을 프로퍼티 바인딩 -->
    <button [disabled]="isDisabled">disabled button</button>
  `
})
export class AppComponent {
  name = 'ungmo2';
  contents = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.';
  imageUrl = 'https://via.placeholder.com/350x150';
  isDisabled = true;
}

DOM 프로퍼티는 HTML 요소의 속성과는 다른것이다 쉽게 말하면 아래와 같다.

// DOM 속성 : HTMLInputElement.attributes.value의 값을 취득한다. 결과는 언제나 동일하다.
document.getElementById('user').getAttribute('value'); // ungmo2

// DOM 프로퍼티 : HTMLInputElement.value의 값을 취득한다. 결과는 요소의 상태에 따라 동적으로 변경된다.
document.getElementById('user').value;

어트리뷰트 바인딩

<element [attr.attribute-name]="expression">...</element>

클래스 바인딩

html 요소의 class 어트리뷰트에 클르스를 추가 또는 삭제할 수 있다.두가지 방식이 있다.

//단항 클래스
<element [class.class-name]="booleanExpression">...</element>
//다항 클래스
<element [class]="class-name-list">...</element>

다항 클래스의 경우 이미 클래스가 있으면 그 클래스를 지우고 다시 지정하고, 단항 클래스는 이미 클래스가 있을시 병합 시키는 형식이다.
클래스바인딩은 주로 하나의 클래스를 조건에 의해 추가 또는 삭제하는 용도로 사용. 빌트인 ngClass 디렉티브를 사용하면 좀더 세밀한 제어가 가능

스타일 바인딩

<element [style.style-property]="expression">...</element>

마찬가지로 중복된 스타일은 그전 스타일을 리셋하고 다시 지정한다.
스타일 바인딩은 주로 하나의 인라인 스타일을 조건에 의해 추가하는 용도로 사용한다. 여러개의 인라인 스타일을 추가할 때는 빌트인 ngStyle 디렉티브를 사용하면 편하다.

이벤트 바인딩

<element (event)="statement">...</element>

(event) 괄호로 묶어 바인딩 하며 템플릿에서 컴포넌트 클래스로 데이터가 이동한다.
input 태그의 경우 input 이벤트가 발생하면 $event 를 이벤트 핸들러에 전달할 수 있다.

양방향 데이터 바인딩

말그대로 뷰의 상태가 변화하면 컴포넌트 클래스의 상태도 변화하고 그 반대로 컴포넌트 클래스의 상태가 변화하면 뷰의 상태도 변화하는 것

<element [(ngModel)]="property">...</element>

[()] 대괄호 안에 괄호를 쓰는 형태이다.