Quiero crear una Directiva que se elimine/se agregue al DOM como lo haría *ngIf. Lo que tengo hasta ahora es:
@Directive({ selector: '[myDirective]', host: { '[hidden]': 'hidden', } }) export class MyDirective { constructor(private myService : MyService) { } hidden() { return !this.myService.valid; }Pero lo que necesito es algo como:
@Directive({ selector: '[myDirective]', host: { '*ngIf': 'hidden', } }) ... Lamentablemente, no puedo usar '*ngIf': 'hidden' en el host de la Directiva. El error que obtengo es:
Can't bind to 'ngIf' since it isn't a known property of 'button'. También '[ngIf]': 'hidden' no funciona.
Entonces, ¿cómo puedo usar ngIf en una Directiva?
@Injectable() export class MyService { valid = true; } @Directive({ selector: '[myIf]' }) export class MyIfDirective { constructor(private myService: MyService, private el:ElementRef, private view:ViewContainerRef, private template:TemplateRef<any>) { } ngAfterViewInit(){ if(this.myService.valid) { this.view.createEmbeddedView(this.template); } } } @Component({ selector: 'my-app', template: ` <div> Peek A Boo: <h2 *myIf>Hello</h2> </div> `, }) export class App { constructor() { } }