Angular 템플릿 내 컴포넌트 클래스의 속성

컴포넌트 클래스의 모든 public 속성은 컴포넌트 템플릿 내부에서 접근 가능합니다. 어떻게 접근하는지 살펴보겠습니다.

우리 클래스에 다음과 같은 public 속성이 있다고 가정해 봅시다:

app/app.component.tsexport class AppComponent {
  public test: string = 'abcde';
}

마크업에서 우리 속성의 내용을 출력해 보겠습니다. 이를 위해서는 이중 중괄호 안에 속성 이름을 작성해야 합니다:

app/app.component.html<div>
  {{ test }}
</div>

app/app.component.html<ul>
  <li>name: john</li>
  <li>surn: smit</li>
</ul>