I want to add custom unless directive
opposite of *ngIf
.
Here is my code:
import { Directive, TemplateRef, ViewContainerRef, Input } from '@angular/core';
@Directive({
selector: '[dirUnless]'
})
export class UnlessDirective {
@Input() set unless(condition: boolean) {
if (!condition) {
this.vcRef.createEmbeddedView(this.templateRef);
} else {
this.vcRef.clear();
}
}
constructor(private templateRef: TemplateRef<any>, private vcRef: ViewContainerRef) {}
}
Also I've added next html
:
<div *ngIf="switch"> Conditional Text IF</div>
<div *dirUnless="switch">Conditional Text UNLESS</div>
So obviosly only one div
should be shown when I click switch
.
But I have next error:
Unhandled Promise rejection: Template parse errors: Can't bind to 'dirUnless' since it isn't a known property of 'div'. ("
Problem was that I've didn't declare my Directive on NgModule