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
calleddefaultColor
:@Input() defaultColor: string;
Markup
<p [myHighlight]="color" defaultColor="violet"> Highlight me too! </p>
Angular knows that the
defaultColor
binding belongs to theHighlightDirective
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>