Angular 가이드

디렉티브(directive) 란?

• Angular 앱의 엘리먼트에 어떤 동작을 추가하는 클래스
  • 컴포넌트.ts
  • NgClass , NgStyle, ngModel
  • ng-if , ngFor, ngSwitch 등
• Angular는 폼, 목록, 스타일 등에 적용할 수 있는 기본 디렉티브를 다양하게 제공한다.

Angular 디렉티브는 구체적으로 셋으로 구분된다.

• 컴포넌트 (Componentns) : 템플릿이 존재하는 디렉티브

• 어트리뷰트 디렉티브 (Attribute directives) : 엘리먼트, 컴포넌트, 디렉티브의 모습이나 동작을 변경하는 디렉티브

• 구조 디렉티브 (Structural directives) : 조건에 따라 DOM 엘리먼트를 추가하거나 제거하는 디렉티브

어트리뷰트 디렉티브 (Attribute directives)

• NgClass : CSS 클래스를 추가하거나 제거한다.
• NgStyle : HTML 스타일을 추가하거나 제거한다.
• NgModel : HTML 폼 엘리먼트에 양방향 데이터 바인딩을 연결한다.

NgClass 예제