how can I pass a value from parent component to directive in Angular 2?

Question

If I have the following line of code in my parent component

<input datepicker type="text" (change)="update($event)"/>

How can I pass a value to the datepicker directive?

Answer 1

Define the input within the directive

datepicker.directive.ts

import {Input} from '@angular/core';
...
export class DatePickerDirective{
    @Input() config:any = {}; //set to default configuration
}

Now if you bind to the config property of this directive in the template, Angular will pass that value

parent.component.ts

dateConfig:any;

parent.component.html

<input datepicker type="text" [config]="dateConfig"/>