angular: directivas y personalización [miguel angel torres egea]

Aquesta pàgina és només de lectura. Podeu veure'n el codi font, però no podeu canviar-la. Consulteu el vostre administrador si penseu que això és degut a algun error.
= angular: directivas y personalización
  * componentes
    * directivas con plantilla asociada
    * son del tipo más común
  * [[development:angular:directivas-atributos|directivas de atributos]]
    * cambian la apariencia o el comportamiento de un elemento, componente u otra directiva
    * se usan como atributos de los elementos HTML (ngStyle)
  * [[development:angular:directivas-estructurales|directivas estructurales]]
    * 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í:<sxh html><div appDestacado>Oferta de la semana</div></sxh>
  * usando el cli generamos el código genérico:<code bash>ng g[enerate] d[irective] directivas/destacado --spec=false</code>
  * obtendremos algo así y le añadiremos las líneas marcadas:<sxh typescript; highlight:[7-12]>import { Directive } from '@angular/core';
@Directive({
    selector: '[appDestacado]'
})

export class DestacadoDirective {
    constructor( private el: ElementRef) { 
         const nativeElement = el.nativeElement;
         nativeElement.style.fontSize = '28px';
         nativeElement.style.color = 'red';
         nativeElement.style.textAlign = 'center';
         nativeElement.style.border = '2px solid red';
    }
}</sxh>
    * **ElementRef** nos da acceso al elemento al cual se ha de aplicar la directiva (angular lo inyecta mediante el mecanismo de [[https://es.wikipedia.org/wiki/Inyecci%C3%B3n_de_dependencias|inyección de dependencias]])
  * aceptando parámetros desde el componente .html<sxh typescript; highlight:7,14>
import {Directive, ElementRef, Input, OnInit} from '@angular/core';
@Directive({
    selector: '[appDestacado]'
})

export class DestacadoDirective implements OnInit {
    @Input('appDestacado') userColor: string;
    constructor(private el: ElementRef) { }
    ngOnInit(): void {
        const nativeElement = this.el.nativeElement;
        nativeElement.style.fontSize = '28px';
        nativeElement.style.color = this.userColor || 'red';
        nativeElement.style.textAlign = 'center';
        nativeElement.style.border = '2px solid ' + (this.userColor || 'red');
    }
}
</sxh>
    * usamos el decorador **@Input** para recibir el parámetro que recibimos desde el html:<sxh html; highlight:7>
<div class="container main.container">
    <h1>Demo <small>directivas</small></h1>
    <hr>
    <app-clases></app-clases>
    <br><br>
    <div appDestacado>Oferta de la semana</div>
    <div [appDestacado]="'violet'">Oferta de la semana</div>
</div>
</sxh>

=== directiva estructural personalizada
<code bash>ng g[enerate] d[irective] directivas/nult --skipTests</code>
  * en contraposición a las directivas de atributo, tenemos que acceder a través del constructor a la plantilla a la que la directive puede acceder, es decir, a la pantilla que posiblemente necesitemos modificar
  * la directiva ha de tener un parámetro de entrada (a través de **@Input**)
  * ejemplo:<sxh html; highlight:6-8>
<div class="container main.container">
    <h1>Demo <small>directivas</small></h1>
    <hr>
    <app-clases></app-clases>
    <br><br>
    <p *appMult="5">
        Saludos
    </p>
</div>
</sxh>
<sxh typescript>
import { Directive } from '@angular/core';

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

export class MultDirective {

    constructor(
        private templateRef: TemplateRef<any>,
        private viewContainer: ViewContainerRef) { 

            @Input() set appMult(numero: number) {
                for (let i = 0; i < numero; i++) {
                    this.viewContainer.createEmbeddedView(this.templateRef);
                }
            }        
        }
    }
</sxh>