Diferències

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

--- development:angular:directivas [09/02/2020 14:35] – [directiva de atributo personalizada] mate
+++ development:angular:directivas [09/02/2020 14:46] (actual) – mate
@@ Línia 61: / Línia 61: @@
 </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>