Diferències

Ací es mostren les diferències entre la revisió seleccionada i la versió actual de la pàgina.

Enllaç a la visualització de la comparació

--- development:angular:directivas [27/01/2020 07:28] – suprimit mate
+++ development:angular:directivas [09/02/2020 14:46] (actual) – mate
@@ Línia 1: / Línia 1: @@
+= 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>