typescript - Angular 2 - How does the directive give data to the host? -
i have think should pretty problem solve in angular 2, can't find right syntax.
my goal directive following:
- accepts arbitrary data value. e.g.,
[my-data]="[1,2,3,4,5]"
- processes on change. e.g.
onchange() { return this.data.length = 55; }
. - sends data host, , binds host property.
i'm fine on 1), little lost on 2) , 3). far have like:
@directive({ selector: ['ap-data'], host: { '(change)': 'onchange()' } }) export class datadirective { @input('ap-data') data: any; @hostbinding('attr.ap-data') dataset() { return processdata(this.data); } ... } @component({ selector: 'mycomponent', directive: [datadirective], template: ` <div [ap-data]="[1,2,3,4,5]"></div> ` }) export class mycomponent { public data: any[]; public dataset: processeddatatype; ... }
for directive host binding use eventemitter
:
@output('ap-data-change') apdatachange: eventemitter = new eventemitter() onchange() { ... this.apdatachange.next(somevalue); } <div [ap-data]="[1,2,3,4,5]" (ap-data-change)=hostfield=event$></div>
Comments
Post a Comment