Aquesta és una revisió antiga del document
angular: directivas
- componentes
- directivas con plantilla asociada
- son del tipo más común
-
- cambian la apariencia o el comportamiento de un elemento, componente u otra directiva
- se usan como atributos de los elementos HTML (ngStyle)
-
- modifican la representación del DOM añadiendo o eliminando elementos
- cambian la estructura de la vista (ngFor, ngIf)
directivas personalizadas
- para extender las capacidades del framework
- creamos nuestros propias directivas de atributo o directivas estructurales
directiva de atributo personalizada
- queremos crear algo así:
<div appDestacado>Oferta de la semana</div>
- usando el cli generamos el código genérico:
ng g[enerate] d[irective] directivas/destacado --spec=false
- obtendremos algo así y le añadiremos las líneas marcadas:
import { Directive } from '@angular/core'; @Directive({ selector: '[appDestacado]' }) export class DestacadoDirective { constructor( privete el: ElementRef) { const nativeElement = el.nativeElement; nativeElement.style.fontSize = '28px'; nativeElement.style.color = 'red'; nativeElement.style.textAlign = 'center'; nativeElement.style.border = '2px solid red'; } }- ElementRef no da acceso al elemento al cual se ha de aplicar la directiva (angular lo inyecta mediante el mecanismo de inyección de dependencias)