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