13. Angular Directive

2017.07.30 in Angular

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

highlight.ts

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

...
import { Highlight } from '../pages/prescription/highlight';
...
@NgModule({
  declarations: [
	...
    Highlight
    ...

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

페이지.ts

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

Comment and share

13. Angular Directive

Reference

Junho Nam