Syntax for passing data into an Angular Directive

Question

I've got a directive in an Angular3 Dart project:

@Directive(
    selector: "[sample]",
    inputs: const ["text1", "text2"]
)
class SampleDirective implements AfterContentInit {

    ... more code ...

    @Input("text1") String text1 = "Some Text 1";
    @Input("text2") String text2 = "Some Text 2";

}

Now when I'm using this directive:

<a-component *sample></a-component>

How do I pass in the text1 and text2 fields?

The cheatsheat mentions this example: <p *myUnless="myExpression">...</p>, but doesn't state what the myExpression part should look like.

These are the ones I've already tried, but none of them compiles.

<a-component *sample="text1:'TESTING' "></a-component>
<a-component *sample="text1='TESTING' "></a-component>
<a-component *sample="{text1:'TESTING'}"></a-component>
<a-component *sample="{text1='TESTING'}"></a-component>

Any idea how these expressions should be structured?

Günter Zöchbauer · Accepted Answer · 2017-05-19 08:22:46Z

4

@Input("sampleText1") String text1 = "Some Text 1";

or

@Input() String sampleText1 = "Some Text 1";

with

<a-component *sample="text1:'TESTING' "></a-component>

or

<template sample [sampleText1]="'TESTING'">
  <a-component></a-component>
</template>

update

There needs to be an @Input() that matches the selector of the directive

@Input() 
String sample;

and a value needs to be passed

<a-component *sample="'someValueForSample' text1:'TESTING' "></a-component>

then after that value assignments for other inputs can be added.

edited May 19, 2017 at 8:22

answered May 15, 2017 at 12:33

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jan Vladimir Mostert Over a year ago

<sample-form-3 *sample="text1:'TESTING' "></sample-form-3> gives me

ParseErrorLevel.FATAL: Parser Error: Unexpected token :, expected identifier, keyword, or string at column 13 in [sample text1:'TESTING' ]

Günter Zöchbauer Over a year ago

I'm quite sure I tested it. I'll have another look tomorrow.

Jan Vladimir Mostert Over a year ago

I realized I was missing such a variable. Also, any secondary inputs needs to start with the same part as the directive, so text1:TESTING only sets if I have an input called sampleText1, otherwise it simply throws a FATAL exception. Very fincky to use.

Collectives™ on Stack Overflow

Syntax for passing data into an Angular Directive

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related