재사용 가능한 동작 만들기

구성 요소로서의 동작

단일 목적 지시문

@Directive({
  selector: '[appElevate]'
})
export class ElevateDirective {
  @HostBinding('style.boxShadow')
  shadow = '0 2px 8px rgba(0,0,0,.15)';
}

호버 동작

@Directive({ selector: '[appHoverClass]' })
export class HoverClassDirective {
  @HostBinding('class.is-hover') hovering = false;
  @HostListener('mouseenter') on() { this.hovering = true; }
  @HostListener('mouseleave') off() { this.hovering = false; }
}

동작 조합하기

@Component({
  selector: 'app-card',
  hostDirectives: [ElevateDirective, HoverClassDirective],
  template: '<ng-content></ng-content>'
})
export class CardComponent {}

컴포넌트 간 재사용

구성 가능한 동작

@Directive({ selector: '[appElevate]' })
export class ElevateDirective {
  level = input(1);
}

조정 기능 노출하기

hostDirectives: [{
  directive: ElevateDirective,
  inputs: ['level']
}]

동작 조정하기

테스트 용이성

이름 지정 규칙

동작 라이브러리

빠른 확인

요약