angular - Passing arbitrary data to a child directive -
i using wijmo's wjflexgriddetail directive, , want control rows display detail grid based on whether "detaildata" array in component contains matching data. rowhasdetail property takes function uses outer grid's row input , returns boolean. want this:
<ng-template wjflexgriddetail let-item="item" [rowhasdetail]="hasdetail"> hasdetail (row): boolean { return this.detaildata.filter(item => item.id === row.dataitem.id).length > 0 } // detaildata undefined when try but doesn't work because this in scope of function refers wjflexgriddetail object, doesn't contain data i'm trying check against. tried binding data attribute:
<ng-template wjflexgriddetail let-item="item" [rowhasdetail]="hasdetail" [attr.data-detail]="detaildata"> but got error:
uncaught (in promise): error: template parse errors: property binding data-detail not used directive on embedded template. make sure property name spelled correctly , directives listed in "@ngmodule.declarations".
is there way data scope of function? or wjflexgriddetail usage, there way accomplish goal (i want display + expansion button rows have detail data)?
i found solution, feels bad angular there's still better answer out there.
the bind function can add data scope of function. instead of passing in function directly, call function returns function , bind data it.
<ng-template wjflexgriddetail let-item="item" [rowhasdetail]="hasdetail()"><!-- note () --> hasdetail (): (row) => boolean { return function (row): boolean { return && this.filter(item => item.id === row.dataitem.id).length > 0 }.bind(this.detaildata) } changing scope of function detaildata allows comparison made, doesn't feel "correct" way of doing things.
Comments
Post a Comment