[Angular] 디렉티브와 템플릿 문법, 그리고 바인딩 문법

템플릿 문법

① 문자열 바인딩(interpolation)

② 프로퍼티 바인딩

③ 어트리뷰트 바인딩

④ 클래스/스타일 바인딩

⑤ 이벤트 바인딩

⑥ 템플릿 참조 변수

⑦ 기본 디렉티브

⑧ 입출력 프로퍼티 (@Input, @Output or @Input & @Output 함께 사용하기)

 

바인딩 문법

① 문자열 바인딩(interpolation)

카테고리 : (one-way) 컴포넌트 → 뷰

구문 : {{ expression }}

 

② 프로퍼티

카테고리 : (one-way) 컴포넌트 → 뷰

구문 : [DOM property]="expression"

 

③ 어트리뷰트

카테고리 : (one-way) 컴포넌트 → 뷰

구문 : [attr.attribute-name]="expression"

 

④ 클래스

카테고리 : (one-way) 컴포넌트 → 뷰

바인딩 타입	문법	입력 값	예제
클래스 하나	[class.sale]="onSale"	boolean | undefined | null	true, false
클래스 여러개	[class]="classExpression"	string	"class-1 class-2 class-3"
클래스 여러개	[class]="classExpression"	Record<string, boolean | undefined | null>	{ foo: true, bar: false }
클래스 여러개	[class]="classExpression"	Array<string>	["class-1", "class-2", "class-3"]
**디렉티브 ngClass(표현식)	[ngClass]="isSpecial ? 'special' : 'empty'"	boolean | undefined | null	true, false
**디렉티브 ngClass(메서드)	[ngStyle]="currentClasses"	Record<string, boolean>

※ ngClass에 메서드를 사용하려면 이 메서드를 컴포넌트 클래스에 정의해야 한다. setCurrentClasses() 메서드는 컴포넌트의 다른 프로퍼티 값을 참조해서 객체 형태로 currentClasses 프로퍼티 값을 할당한다. (참고링크)

 

currentClasses: Record<string, boolean> = {};
/* . . . */
setCurrentClasses() {
  // CSS 클래스는 컴포넌트 프로퍼티 값에 따라 추가되거나 제거됩니다.
  this.currentClasses =  {
    saveable: this.canSave,
    modified: !this.isUnchanged,
    special:  this.isSpecial
  };
}

 

⑤ 스타일

카테고리 : (one-way) 컴포넌트 → 뷰

바인딩 타입	문법	입력 값	예제
스타일 하나	[style.width]="width"	string | undefined | null	"100px"
스타일 하나를 단위와 함께	[style.width.px]="width"	number | undefined | null	100
스타일 여러개	[style]="styleExpression"	string	"width: 100px;height: 100px"
스타일 여러개	[style]="styleExpression"	Record<string, string | undefined | null>	{width: "100px", height: "100px"}
**디렉티브 ngStyle(메서드)	[ngStyle]="styleExpression"	Record<string, string>	{color : this.isDefault ? 'red'   : 'blue'}
**디렉티브 ngStyle(표현식)	[ngStyle]="{color : isDefault ? 'red'   : 'blue'}"	boolean | undefined | null	-

※ ngStyle을 사용하기 위해 컴포넌트 클래스에 메서드를 추가해야 한다. 아래 예제에서 setCurrentStyles()는 컴포넌트의 다른 프로퍼티 값을 참조해서 객체 형태로 currentStyles 프로퍼티 값을 할당한다. (참고링크)

 

currentStyles: Record<string, string> = {};
/* . . . */
setCurrentStyles() {
  // CSS 스타일은 컴포넌트 프로퍼티 값에 따라 지정됩니다.
  this.currentStyles = {
    'font-style':  this.canSave      ? 'italic' : 'normal',
    'font-weight': !this.isUnchanged ? 'bold'   : 'normal',
    'font-size':   this.isSpecial    ? '24px'   : '12px'
  };
}

 

⑥ 이벤트

카테고리 : (one-way) 뷰 → 컴포넌트

구문1 : <button (target event name)="template statement" />

그런데 운영체제에 따라 키조합이 동작하지 않고 특수문자가 입력되는 경우가 있습니다. 예를 들어 MacOS에서 keydown.shift.alt.t라고 바인딩하면 t 대신 ˇ 문자가 입력되며 이벤트 핸들러도 제대로 동작하지 않을 수 있습니다. MacOS에서 keydown.shift.alt.t를 바인딩하려면 code 필드를 사용해서 keydown.code.shiftleft.altleft.keyt라고 지정해야 원하는대로 동작합니다.

 

구문2 : <input (keydown.shift.t)="onKeydown($event)" />

구문3 : <input (keydown.code.shiftleft.altleft.keyt)="onKeydown($event)" />

 

⑦ 양방양

카테고리 : (two-way) 컴포넌트 ↔ 뷰

구문 : [(target)]="expression"

@Input, @Output이 합쳐진 형태

 

Q. 앵귤러는 이벤트 대상 확인 프로세스가 있다? (공식문서 - 이벤트 바인딩)

"Angular는 이벤트 대상을 확인하기 위해 대상 이벤트 이름이 디렉티브의 이벤트 프로퍼티 이름과 같은지 검사합니다."

혹시 @Output 데코레이터의 메서드를 얘기하는건가??

 

Q. 패시브 이벤트 바인딩? (공식문서 - 이벤트 바인딩)

"이 방식은 모든 애플리케이션에 필요한 기법은 아니며, 숙련자를 위한 사용방식입니다. 이벤트가 빈번하게 발생하는 것 때문에 성능 문제가 있다면 이 방법을 고려해볼만 합니다."