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 [22/01/2020 12:14] – [4.3 ngClass] mate
+++ development:angular:directivas [09/02/2020 14:46] (actual) – mate
@@ Línia 1: / Línia 1: @@
-= directivas
+= angular: directivas y personalización
-== 3.7 directivas estructurales
+  * componentes
-  * no es necesario fichero HTML
+    * directivas con plantilla asociada
-  * no es un componente
+    * son del tipo más común
-  * se reconocen por tener **%%*%%** en el nombre
+  * [[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)
-== 3.8 directivas estructurales
+== directivas personalizadas
-  * directivas
+  * para extender las capacidades del framework
-  * {{ :development:angular:pasted:20200122-100054.png }}
+  * creamos nuestros propias directivas de atributo o directivas estructurales
-  * binding de eventos
-  * {{ :development:angular:pasted:20200122-100139.png }}
-== 4.1 directiva bgStyle
+=== directiva de atributo personalizada
-== 4.2 ámbito del css
+  * queremos crear algo así:<sxh html><div appDestacado>Oferta de la semana</div></sxh>
-== 4.3 ngClass
+  * 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]'
+})
-== 4.4 procesos asíncronos
+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]'
+})
-== 4.5 Directivas personalizadas
+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>