Angular는 지시자(directive)란 사용자 정의 HTML 요소의 extensibility를 향상시켜주는 것으로, Angular 애플리케이션의 개발을 간편하게 해줍니다. Angular가 제공하는 지시자의 유형은 세 가지가 있습니다.

1. Component Directive
2. Structural Directive
3. Attribute Directive

Component Directive

Component Directive는 최상위 수준의 뷰 레벨 컴포넌트로, @Component() 데코레이터를 사용하여 정의됩니다. 예를 들어:

@Component({
  selector: 'app-custom',
  template: '<h1>Custom Directive Component</h1>'
})
export class CustomDirectiveComponent {}

Structural Directive

Structural Directive는 DOM 내의 레이아웃을 변경할 때 사용됩니다. 가장 일반적인 Structural Directive로는 *ngFor와 *ngIf가 있습니다.

<div *ngFor="let item of items">
  {{ item }}
</div>

Attribute Directive

Attribute Directive는 DOM 요소의 모양, 동작 또는 모임을 변경할 때 사용됩니다. 예를 들어, ElementRef와 Renderer를 사용하여 DOM에 직접 액세스하여 스타일 및 속성을 변경할 수 있습니다.

@Directive({
  selector: '[appCustomStyle]'
})
export class CustomStyleDirective {
  constructor(private el: ElementRef, private renderer: Renderer2) {
    this.renderer.setStyle(this.el.nativeElement, 'color', 'red');
  }
}

Angular의 지시자는 애플리케이션에 유연성과 확장성을 제공하며, 사용자 정의된 요소와 속성을 통해 애플리케이션의 UI/UX를 향상시킬 수 있습니다.

더 많은 정보를 확인하려면 Angular 공식 문서를 참조하세요.