프로퍼티 바인딩

프로퍼티 바인딩(property binding)을 활용하면 HTML 엘리먼트나 Angular 컴포넌트의 프로퍼티 값을 원하는 값으로 설정할 수 있습니다.

동적으로 변경되는 값을 프로퍼티나 어트리뷰트에 바인딩할 때는 프로퍼티 바인딩을 사용하면 됩니다. 이런 기능은 버튼을 토글하거나 로직으로 이미지를 변경할 때, 컴포넌트 사이에 값을 전달해야 할 때 사용합니다.

참고: 동적 프로퍼티, 어트리뷰트 값 설정하기 핵심 가이드 문서를 참고하세요.

이제 프로퍼티 바인딩을 어떻게 사용할 수 있는지 알아봅시다.

엘리먼트의 어트리뷰트를 바인딩하려면 어트리뷰트 이름을 대괄호([, ])로 감싸면 됩니다:

      
<img alt="photo" [src]="imageURL">
    

이 예제에서는 엘리먼트의 src 어트리뷰트 값이 클래스 프로퍼티 imageURL과 바인딩 되어 있습니다. 그래서 imageURL 값이 변경되면 img 태그의 src 어트리뷰트도 같은 값으로 변경됩니다.

1. isEditable 프로퍼티를 추가해 보세요

   app.ts 파일에 있는 App 컴포넌트 클래스에 isEditable 프로퍼티를 추가하고 초기값으로 true를 설정해 보세요.

         
   export class App {    isEditable = true;}
       

2. contentEditable에 바인딩 해보세요

   그 다음은 div 엘리먼트의 contentEditable 어트리뷰트와 isEditable 프로퍼티를 [] 문법으로 바인딩 하면 됩니다.

         
   @Component({    ...    template: `<div [contentEditable]="isEditable"></div>`,})
       

이제 div는 수정할 수 있는 div가 되었습니다. 훌륭하군요 👍

프로퍼티 바인딩은 Angular 앱을 개발할 때 매우 자주 사용되는 기능입니다. 자세한 내용은 이 문서를 참고하세요.