How to pass multiple parameter to @Directives (@Components) in Angular with TypeScript?

From the Documentation

As with components, you can add as many directive property bindings as you need by stringing them along in the template.

Add an input property to HighlightDirective called defaultColor:

@Input() defaultColor: string;

Markup

<p [myHighlight]="color" defaultColor="violet">  Highlight me too!</p>

Angular knows that the defaultColor binding belongs to the HighlightDirective because you made it public with the @Input decorator.

Either way, the @Input decorator tells Angular that this property is public and available for binding by a parent component. Without @Input, Angular refuses to bind to the property.

For your example

With many parameters

Add properties into the Directive class with @Input() decorator

@Directive({    selector: '[selectable]'})export class SelectableDirective{    private el: HTMLElement;    @Input('selectable') option:any;       @Input('first') f;    @Input('second') s;    ...}

And in the template pass bound properties to your li element

<li *ngFor = 'let opt of currentQuestion.options'     [selectable] = 'opt'     [first]='YourParameterHere'    [second]='YourParameterHere'    (selectedOption) = 'onOptionSelection($event)'>    {{opt.option}}</li>

Here on the li element we have a directive with name selectable. In the selectable we have two @Input()'s, f with name first and s with name second. We have applied these two on the li properties with name [first] and [second]. And our directive will find these properties on that li element, which are set for him with @Input() decorator. So selectable, [first] and [second] will be bound to every directive on li, which has property with these names.

With single parameter

@Directive({    selector: '[selectable]'})export class SelectableDirective{    private el: HTMLElement;    @Input('selectable') option:any;       @Input('params') params;    ...}

Markup

<li *ngFor = 'let opt of currentQuestion.options'     [selectable] = 'opt'     [params]='{firstParam: 1, seconParam: 2, thirdParam: 3}'    (selectedOption) = 'onOptionSelection($event)'>    {{opt.option}}</li>

to pass many options you can pass a object to a @Input decorator with custom data in a single line.

In the template

<li *ngFor = 'let opt of currentQuestion.options'                 [selectable] = 'opt'                [myOptions] ="{first: opt.val1, second: opt.val2}" // these are your multiple parameters                (selectedOption) = 'onOptionSelection($event)' >     {{opt.option}}</li>

so in Directive class

@Directive({  selector: '[selectable]'})export class SelectableDirective{  private el: HTMLElement;  @Input('selectable') option:any;  @Input('myOptions') data;  //do something with data.first  ...  // do something with data.second}

Another neat option is to use the Directive as an element and not as an attribute.

@Directive({   selector: 'app-directive'})export class InformativeDirective implements AfterViewInit {    @Input()    public first: string;    @Input()    public second: string;    ngAfterViewInit(): void {       console.log(`Values: ${this.first}, ${this.second}`);    }}

And this directive can be used like that:

<app-someKindOfComponent>    <app-directive [first]="'first 1'" [second]="'second 1'">A</app-directive>    <app-directive [first]="'First 2'" [second]="'second 2'">B</app-directive>    <app-directive [first]="'First 3'" [second]="'second 3'">C</app-directive></app-someKindOfComponent>`

Simple, neat and powerful.