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

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

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

export class AppComponent {
	public test: string = 'abcde';
}

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

<div>
	{{ test }}
</div>

다음 마크업이 주어졌습니다:

<ul>
	<li>name: john</li>
	<li>surn: smit</li>
</ul>

이름과 성이 컴포넌트 클래스로부터 템플릿으로 전달되도록 만드세요.