[Angular] Custom Directive 만들어 적용하기 (Create & Adjust a Custom Directive)

안녕하세요 Foma 입니다!

 

저번 글에 Angular에 이미 구현된 Built-in 디렉티브에 대해서 알아 보았는데요.

 

이번 글은 직접 커스텀한 디렉티브를 만들고 적용하는 방법에 대해서 알아 보겠습니다.

 

바로 시작할게요~

---

Generate Directive

 

아래와 같이 디렉티브를 생성해 줍니다.

 

저는 mouse control에 따라 스타일이 바뀌는 디렉티브를 만들거기 떄문에 mouseControl으로 이름 지어주겠습니다.

 

ng g d 디렉티브이름
//or
ng generate directive 디렉티브이름

 

directive.ts

 

아래와 같이 Directive가 생성 될거에요.

 

@Directive에 selector로 app + 디렉티브이름으로 만들어지는 것을 볼 수 있습니다.

 

import { Directive } from '@angular/core';

@Directive({
  selector: '[appMouseControl]',
})

export class MouseControlDirective {
  constructor() {}
}

 

이제 마우스 컨트롤에 따라서 엘리먼트 스타일이 바뀌는 걸 작성해 볼게요.

 

먼저 값을 엘리먼트로 부터 값을 전달 받을 @Input 데코레이터를 만들어 줄게요.

 

* @Input

 

템플릿의 DOM 프로퍼티에 바인딩 되어 변경되면 자동으로 업데이트 해주는 데코레이터 입니다.

 

 

배경색, 폰트 사이즈, 텍스트 컬러를 전달 받도록 만들어 주겠습니다.

 

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[appMouseControl]',
})
export class MouseControlDirective {
  @Input('backgroundColor') backgroundColor: string = 'white';
  @Input('fontSize') fontSize: number = 14;
  @Input('textColor') textColor: string = 'black';

  constructor(private el: ElementRef) {}
	...
}

 

이제 mouse가 해당 엘리먼트에 들어왔을 때와 나갔을 때 스타일이 적용되고 해제되는 것을 구현해 보겠습니다.

 

@HostListener 데코레이터를 사용하여 사용자의 입력값을 감지하겠습니다.

 

* @HostListener

 

DOM에서 특정 이벤트가 발생할 때 실행할 메서드를 제공하는 데코레이터 입니다.

 

 

@HostListener('mouseenter') 로 마우스가 해당 엘리먼트에 들어왔을 때 위에서 @Input 값을 전달 받은 스타일 값들을 적용해 줍니다.

 

@HostListener('mouseleave')로 마우스가 밖에 나갔을 때 style을 모두 해제해 줍니다.

 

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[appMouseControl]',
})
export class MouseControlDirective {
  ...
   @HostListener('mouseenter') onMouseEnter() {
    this.el.nativeElement.style.backgroundColor = this.backgroundColor;
    this.el.nativeElement.style.fontSize = this.fontSize + 'px';
    this.el.nativeElement.style.color = this.textColor;
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.el.nativeElement.style = {};
  }
}

 

component.html

 

위에서 만든 디렉티브를 적용할 템플릿으로 이동해 줍니다.

 

원하는 엘리먼트 태그에 디렉티브 이름을 적어 적용해 주고, 위에서 만든 @Input에 전달할 값들을 '[]'를 이용해 차례로 넣어줍니다.

 

<h1
  appMouseControl
  [backgroundColor]="'black'"
  [fontSize]="36"
  [textColor]="'white'"
>
  디렉티브 테스트
</h1>

 

디렉티브를 적용하면 '['만 작성해도 이미 만들어준 @Input 값들을 고를 수 있습니다.

 

---

실행결과

 

마우스가 들어왔을 때

 

 

마우스가 나갔을 때

---

여러 스타일 한번에 적용하기

 

만약 여러 스타일을 한번에 적용하고 싶다면 @Input 데코레이터에 객체 형태를 만들어 줍니다.

 

그리곤 renderer를 이용해서 전달받은 객체 안의 값들을 스타일로 모두 적용시켜 줍니다.

 

directive.ts

 

import {
  Directive,
  ElementRef,
  HostListener,
  Input,
  Renderer2,
} from '@angular/core';

@Directive({
  selector: '[appMouseControl]',
})
export class MouseControlDirective {
  @Input('styles') styles: any = {};

  constructor(private el: ElementRef, private renderer: Renderer2) {}

  @HostListener('mouseenter') onMouseEnter() {
    Object.keys(this.styles).forEach((newStyle) => {
      this.renderer.setStyle(
        this.el.nativeElement,
        `${newStyle}`,
        this.styles[newStyle]
      );
    });
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.el.nativeElement.style = {};
  }
}

 

 

component.html

 

 

@Input값에 전달할 값을 객체 형태로 전달해 줍니다.

 

<h1
  appMouseControl
  [styles]="{ backgroundColor: 'black', fontSize: '36px', color: 'white' }"
>
  디렉티브 테스트
</h1>

---

실행결과

 

위와 같이 적용해도 같은 결과가 나옵니다.

 

마우스가 들어왔을 때

 

 

마우스가 나갔을 때