How to pass in a second input to a directive with a kebab case selector?

Question

Say I have a directive that has a selector of selector: '[example-directive]' . Is there a way to pass in a second input to the directive? I've been able to succeed by changing the selector to selector: '[exampleDirective]' and prefixing the input with exampleDirective, but I'm wondering if there's a way to do it in kebab case.

This is roughly what the directive looks like:

@Directive({
    selector: '[example-directive]',
})
export class ExampleDirective implements OnChanges {
    @Input('example-directive') input1: string;

    @Input() exampleDirectiveInput2: string;

I've tried to add an alias to the second input with no luck:

@Input('input2') exampleDirectiveInput2: string;

html: <div *example-directive="'value1'; input2: 'value2'"></div>

Answer 1

If you would like to pass multiple parameter into the same structural directive you could wrap them into an object.

But you can also define multiple inputs, but then you need to pass it like two directives.

<div 
    example-directive="'value1'"
    input2="'value2'"
></div>

Also check out this question: https://stackoverflow.com/a/38843554/5247706

Answer 2

Quick answer: instead of "exampleDirectiveInput2", try example-directiveInput2 . If you want to learn more, please scroll down.

Your case is the same as the ngIf from angular.
The syntax of structure directive is called microsyntax . Here is a good explanation article (don't forget to read the reference links at the end of the article too!) https://www.lucaspaganini.com/academy/angular-structural-directives-and-their-microsyntax

I know I should provide more information, however, it will become a very long answer, plus, the article gives a very detailed answer already, so no need to rewrite it here.