Angular Template (컴포넌트.html <> 컴포넌트.ts 간 바인딩 )

# Angular Template이란?

HTML 코드로서 템플릿을 표현한 것으로써, 기본적인 HTML 언어 이외의, Template 표현식(Expression)과  Template 문장(Statement)로 구성되어 있음

해당 Component Template(.html) 내부에, 해당 Component Class의 속성과 Method가 다양한 형태로 바인딩된다.

(컴포넌트명).component.html이 실질적인 Dom 상의 View를 담당하며, HTML과 템플릿 표현식, 템플릿 문장으로 구성된다.

 

Q. HTML

기존에 널리 알려진 다양한 Tag 들을 정적으로 렌더링하는데, 사용할 수 있다.

 

Q. 템플릿 표현식

이중괄호 안에 컴포넌트 내 속성명을 넣어줌으로, View에 속성값을 보여주는 것이 가능하다.

(ex) <p>{{ todos[i].text }}</p>

 

Q. 템플릿 문장

컴포넌트 내 메소드를 호출하여 값 변경, 변수 대입을 통한 값 변경

(ex) <div (click)="toggleTodo()"></div>

(ex) <div (click)="todo[0].done = !todo[0].done"></div>

 

Tip. 바인딩

Component Class 내 속성 및 메소드와 View(Dom)와의 interaction을 정의를 의미

바인딩의 대상은 자주사용되는 순서대로, Class 내 속성, View의 Event, ngModel, Class, Style 등이 있다.

1. {{ 템플릿 표현식 }}  : Component(class) -> Dom (내부 Data를 외부 View로 보여줄 때)

(ex) <h1>{{ title }}</h1> <h1> {{ title + title }} </h1>

//컴포넌트 Class 내 title 속성값을 Dom에 표시 

 

2. [Dom Tag(or 자식 Component)의 속성명]="템플릿 표현식" : Component(class) -> Dom (내부 Data를 외부 View로 보여줄 때)

(ex) <todo [A]="B">

//Dom 또는 Component의 A 속성에 Component Class 내 B 속성의 값을 넣어준다.

//컴포넌트 Class 내 B 속성값을 Dom의 A속성에 대입 및 표시

 

3. (이벤트)="템플릿 문장" :  Dom -> Component(class) (외부 View의 이벤트로 내부 Data를 변경할 때)

(ex) <button (click)="handle()">

//Component 또는 Dom 상에서 Event 발생시, Component내 handle()이라는 메소드를 호출 

 

4. [(ngModel)]="템플릿 표현식"

(ex) <input type="text" [(ngModel)]="name"> Component(class) <-> Dom

//Input Tag에만 가능

//모듈 내 imports 속성에 FormsModule이 포함되어 있어야 함

//양방향 바인딩

- Component 내 name이라는 속성의 값이 변경될 경우, Dom상의  Input Tag의 value도 변경됨

- Dom 상의 Input Tag의 value가 변경될 경우, Component 내 name이라는 속성의 값도 변경됨

 

 

Tip. ngModel을 사용했을 때, Unknown Property 에러가 발생할 경우

해당 모듈 상의 imports 속성값에, CommonModule 이외에 FormsModule을 추가로 import해주어야한다.

 

# 바인딩 예제

 

//todos.component.ts
todos:{
 done: boolean,
 text: string
}[];
// todos: Todo[]; //Todo라는 Model을 선언해 놓는 것이 일반적
newText = '';

constructor(){
 this.todos=[
  {done : false, text:"공부하기"},
  {done : false, text:"공부하기"}
 ]; //dummy 데이터 생성
}
...
toggleTodo(todo){
 todo.done = !todo.done;
}
addTodo(newText:string){
 this.todos.push({done:false,text: newText});
this.newText = '';
}

//todos.component.html
<div>
 {{ todos[0].text }}
 {{ todos[1].text }}
 <input type="checkbox" [checked]="todos[0].done"> //dom의 checked 속성에 component의 todos[i].done 속성값을 바인딩
</div>
<div *ngFor="let todo of todos"> //let은 새로운 형태의 var
 <input type="checkbox" [checked]="todo.done"> {{todo.text}}
</div>
<div *ngFor="let todo of todos" (click)="todo.done = !todo.done"> 
//Dom의 (event) 발생시, Component 상의 속성값을 변경하는 템플릿 표현식이 사용되었다.
  <input type="text" [checked]="todo.done"> {{todo.text}}
</div>
<div *ngFor="let todo of todos" (click)="toggleTodo(todo)">
</div>
<input type="text" placeholder="할일 추가" [(ngModel)]="newText">
<button (click)="addTodo(newText)"> Add </button>

 

Tip. let과 var의 차이

var는 함수 안에서의 scope를 가지는 반면, let은 블럭 안에서의  scope를 가진다.

 

# *ngFor="let todo of todos"

Literal한 Data 처리 또는 반복되는 Data를 표현하는 경우에 사용된다.