Diretivas - Introdução

Criando uma diretiva de atributo customizada:

• ElementRef: Faz referencia ao elemento do DOM.
• Renderer: Renderizador, também responsável por fazer manipulações no DOM.

Criar uma diretiva para manipular o DOM.

ng g d nome-da-diretiva

<p appFundoAmarelo>
    Texto com fundo amarelo
</p>

import { Directive, Renderer } from '@angular/core'

@Directive ({
    selector: '[appFundoAmarelo]'
})

expor class NomeDaDiretiva {

    constructor(
            private _renderer: Renderer,
            private _elementRef: ElementRef
        ) {
        this._renderer.setElementStyle(
            this._elementRef.nativeElement,
            'background-color',
            'yellow'
        );
    }

}