angular2 custom directives inputs syntax

Question

I create a custom directive and set the selector value to be "[unless-directive]".

The directive get a Boolean and use it to change the view as so:

import {Directive, TemplateRef, ViewContainerRef} from 'angular2/core';

@Directive({
    selector: '[unless-directive]',
    inputs: ['givenBoolean : myDirectiveFunction']
})

export class UnlessDirective {
    private _templateRef: TemplateRef;
    private _viewContainerRef: ViewContainerRef;


    constructor(_templateRef: TemplateRef, _viewContainerRef: ViewContainerRef) {
        this._templateRef = _templateRef;
        this._viewContainerRef = _viewContainerRef;
    }

    set myDirectiveFunction(condition: boolean) {
        !condition ? this._viewContainerRef.createEmbeddedView(this._templateRef)
            : this._viewContainerRef.clear();
    }
}

In my template I tried to pass the condition like so:

<div name="customDirective">
    <h2>Custom Directive</h2>
    <div>
        Enter true or false:
        <br/>
        <input type="text" #condition (keyup)="0"/>
        <div *unless-directive [givenBoolean]="condition.value != 'false'">
            Only shown if 'false' wad enterded!
        </div>
    </div>
</div>

When I running the code I get this error:

EXCEPTION: Template parse errors: Can't bind to 'givenBoolean' since it isn't a known native property (" ... Only shown if 'false' wad enterded!"): StructualDirectivesComponent@47:39

I guess my syntax is wrong, but I can't find where or why?

I looked it up on Angular2 Docs, but the example use the same name for the input and the selector, the thing that I'm trying to avoid.

Can anyone know a better way or can find my syntax problem?

Thanks.

Answer 1

The * prefix syntax is only a syntatic sugar. It expands the directive declaration.

The * prefix syntax is a convenient way to skip the <template> wrapper tags and focus directly on the HTML element to repeat or include. Angular sees the * and expands the HTML into the <template> tags for us.

This is documented in * and <template> and Directive decorator/Lifecycle hooks.

So, in your case, the [givenBoolean] property is not expected to be in the directive. In other words, this:

<div *unless-directive [givenBoolean]="condition.value != 'false'">
    Only shown if 'false' wad enterded!
</div>

Becomes, actually:

<template [unless-directive]="">
    <div [givenBoolean]="condition.value != 'false'">
            Only shown if 'false' wad enterded!
    </div>
</template>

And since givenBoolean is not a property in the component (not the directive), the error appears.

So if you want custom behavior, I suggest you experiment using the expanded version and only after it works you go to the * syntax, it will be simpler to reason about.