# 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.
```text
Criar uma diretiva para manipular o DOM.
ng g d nome-da-diretiva
```
```HTML
<p appFundoAmarelo>
Texto com fundo amarelo
</p>
```
```typescript
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'
);
}
}
```