태그에 없는 기능을 추가적으로 부여한다.

  • highlight.ts
1
2
3
4
5
6
7
8
9
10
11
12
import { Directive, ElementRef, Renderer } from '@angular/core';

@Directive({
    selector: '[highlight]'
})
export class Highlight {
    constructor ( el: ElementRef, renderer: Renderer ) {
        renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'blue');
        // 다음과 같이 nativeElement를 통해서만 지정할 수 있다.
        // el.nativeElement.style.backgroundColor = 'grey';  
    }
}

ElementRef : highlight 디렉티브가 지정된 태그 자체를 나타냄(el.nativeElement)

Renderer : 태그를 제어하기 위해 사용. 특히 스타일시트에 효과를 줄 때 많이 사용.

  • app.module.ts
1
2
3
4
5
6
7
8
...
import { Highlight } from '../pages/prescription/highlight';
...
@NgModule({
  declarations: [
	...
    Highlight
    ...

만들어준 디렉티비를 declarations에 추가한다.

  • 페이지.ts
1
2
3
4
5
6
7
import { Component } from '@angular/core';

@Component({
  template: `<h2 highlight>라라랄라랄</h2>`
})
export class PrescriptionModal {
}

Reference

https://www.youtube.com/watch?v=lZ7yPTI1xlc&index=24&list=PLAiXlfcSCXYTA8k8AQX0sdRtvpOGkY7yq