Publicado el 04.06.2022 a las 11:27
Empezemos por el principio.
Las directivas pueden cambiar la apariencia o el comportamiento del DOM.
Ejemplos de directivas son el *ngIf, *ngFor... seguro que te suenan
Hay distintos tipos de directivas:
Como ya te he contado, las directivas estructurales modifican el DOM y se reconocen muy fácil porque siempre comienzan con un *.
Vamos a crear una directiva que hará lo contrario que el *ngIf. Como sabes, el *ngIf muestra el template si la condición es true:
<ng-template *ngIf="condition">Esto se monstrará si condition es true</ng-template>
Vamos a crear la directiva *ifNot que mostrará el template si la condición es false
<ng-template ifNot="condition">Esto se monstrará si condition es false</ng-template>
Para generar nuestra directiva utilizaremos el siguiente comando del Angular CLI:
ng generate directive ifNot
O también podemos usar su forma abreviada:
ng g d ifNot
Después de ejecutar el comando anterior se nos crearán dos archivos, el de test y el ts.
El código completo de la directiva sería:
import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core'; // Agrega el contenido de la plantilla al DOM a menos que la condición sea verdadera. @Directive({ selector: '[ifNot]'}) export class IfNotDirective { private hasView = false; constructor( private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) { } @Input() set ifNot(condition: boolean) { if (!condition && !this.hasView) { this.viewContainer.createEmbeddedView(this.templateRef); this.hasView = true; } else if (condition && this.hasView) { this.viewContainer.clear(); this.hasView = false; } } }
import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
constructor(private templateRef: TemplateRef<any>,private viewContainer: ViewContainerRef) { }
TemplateRef te ayuda a llegar al contenido de ng-template y ViewContainerRef accede al contenedor de vista.
@Input() set ifNot(condition: boolean) { if (!condition && !this.hasView) { this.viewContainer.createEmbeddedView(this.templateRef); this.hasView = true; } else if (condition && this.hasView) { this.viewContainer.clear(); this.hasView = false; } }
Angular establece la propiedad ifNot cada vez que cambia el valor de la condición.
<p *ifNot="condition"> Este parrafo se mostrará cuando condition sea false. </p>
Hasta luego 🖖