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.

Did you add UnlessDirective to the directives list of the component where you are using it? To me it sounds as if the directive isn't added. Also check if the constructor of the directive is called at all. — Günter Zöchbauer
– Günter Zöchbauer, Commented Feb 21, 2016 at 17:56
@Günter Zöchbauer Yes, i added to the directives in the Component that use it. This is the right way to do so? I don't have any syntax error? right? — Nir Schwartz
– Nir Schwartz, Commented Feb 21, 2016 at 18:10
Yes, AFAIK. Have you checked the directive is actually instantiated? — Günter Zöchbauer
– Günter Zöchbauer, Commented Feb 21, 2016 at 18:12
I change the input and selector to the same value and it works, like in the example that in Angular2 Docs, but when I change it back, still the same error. What do you mean by instantiated? — Nir Schwartz
– Nir Schwartz, Commented Feb 21, 2016 at 18:15

acdcjunior · Accepted Answer · 2016-02-21 18:33:47Z

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.

Collectives™ on Stack Overflow

angular2 custom directives inputs syntax

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related