[Angular] 템플릿 참조 변수와 세이프 내비게이션 연산자

템플릿 참조 변수와 세이프 내비게이션 연산자 (Template reference variable & Safe navigation operator)

템플릿 참조 변수 (Template reference variable)

• DOM요소에 대한 참조를 담고 있는 변수
• 템플릿 요소 내에서 해시 기호(#)를 변수명 앞에 추가하여 템플릿 참조변수 선언
• 템플릿 내에서만 유효하며 컴포넌트 클래스에 어떠한 side effect도 주지 않는다.
• 이벤트 바인딩을 통해 컴포넌트 클래스로 전달할 수는 있다.
• 사용예로는 이메일 주소 validation check

html <element #myelement> .... </element>

세이프 내비게이션 연산 (Safe navigation operator)

• 세이프 내비게이션 연산 ?는 컴포넌트 클래스의 프로퍼티의 값이 null 또는 undefined 일때 발생하는 에러를 회피하기 위해 사용

• 사용예

  • {{ obj }} <-- 결과 없으며 화면에 아무것도 출력하지 않는다.
  • {{ obj.id }} <-- Cannot read property 'id' of undefined
  • {{ obj?id }} <-- 세이프 내비게이션 연산자는 에러를 발생시키지 않는다.

• [참고]

  • http://poiemaweb.com/angular-component-template-reference-variable