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
HighlightDirectivecalleddefaultColor:@Input() defaultColor: string;
Markup
<p [myHighlight]="color" defaultColor="violet"> Highlight me too! </p>Angular knows that the
defaultColorbinding belongs to theHighlightDirectivebecause you made it public with the@Input
decorator.Either way, the
@Inputdecorator 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>