Search code examples
angularangular2-directives

Angular Can't bind to 'dirUnless' since it isn't a known property


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'. ("


Solution

  • Problem was that I've didn't declare my Directive on NgModule