Angular 기본(4) 컴포넌트, 데이터 추가하기

(4) 컴포넌트에 데이터 추가하기 

컴포넌트에 프로퍼티를 추가하여(데이터) 상단에서 변수를 사용할 수 있도록 설정해보자. 

1 user-name 컴포넌트 추가

-> angular cli에서 user-name 컴포넌트를 추가한다.

2 태그 추가

app.component.html (최상위) 에 <app-user-name> 태그를 아래와 같이 추가해준다.

3 데이터 추가

user-name.component.ts 파일을 열고, name변수를 String타입(문자열)으로 지정한다. 

`` name : string; ``  

앵귤러는 타입스크립트 기능(ES2016)을 사용하기 때문에 타입을 직접 지정할 수 있다. 

같은 방식으로, this.name역시 타입을 지정한다. 

`` this.name  = '제갈치' ``

constructor( ) { }에는 name을 프로퍼티로 사용하여 '제갈치'라는 값을 넣어준다.

4 데이터 실행

user-name.component.html에서 {{  }} 기호 안에, user-name 컴포넌트에서 지정한 프로퍼티 'name'을 넣어보자.

아래와 같이 name값이 랜더링된다.