{"action":"opened","issue":{"url":"https://api.github.com/repos/primefaces/primeng/issues/544","repository_url":"https://api.github.com/repos/primefaces/primeng","labels_url":"https://api.github.com/repos/primefaces/primeng/issues/544/labels{/name}","comments_url":"https://api.github.com/repos/primefaces/primeng/issues/544/comments","events_url":"https://api.github.com/repos/primefaces/primeng/issues/544/events","html_url":"https://github.com/primefaces/primeng/issues/544","id":163410200,"number":544,"title":"Can't pass a template to p-dataTable with ng-content","user":{"login":"ryanwawr","id":6531664,"avatar_url":"https://avatars.githubusercontent.com/u/6531664?v=3","gravatar_id":"","url":"https://api.github.com/users/ryanwawr","html_url":"https://github.com/ryanwawr","followers_url":"https://api.github.com/users/ryanwawr/followers","following_url":"https://api.github.com/users/ryanwawr/following{/other_user}","gists_url":"https://api.github.com/users/ryanwawr/gists{/gist_id}","starred_url":"https://api.github.com/users/ryanwawr/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ryanwawr/subscriptions","organizations_url":"https://api.github.com/users/ryanwawr/orgs","repos_url":"https://api.github.com/users/ryanwawr/repos","events_url":"https://api.github.com/users/ryanwawr/events{/privacy}","received_events_url":"https://api.github.com/users/ryanwawr/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2016-07-01T14:42:58Z","updated_at":"2016-07-01T14:42:58Z","closed_at":null,"body":"I currently have a custom component wrapping a general implementation of the p-dataTable component. I would like to be able to pass in a row expansion template for the table by using an ng-content directive so that I can easily specify different templates for each table.\r\n\r\nThis is the setup I'd like to have:\r\n\r\nTemplate including a directive for the custom component wrapping p-dataTable:\r\n```\r\n<my-custom-component [rows]=\"data\">\r\n    <my-custom-component-template>\r\n        <template let-row>\r\n            <div *ngIf=\"row != null\">\r\n                <div *ngIf=\"row.text == ''\">No text</div>\r\n                <div *ngIf=\"row.text != null\">{{row.text}}</div>\r\n            </div>\r\n        </template>\r\n    </my-custom-component-template>\r\n<my-custom-component>\r\n```\r\n\r\nTemplate for my-custom-component, the component wrapping p-dataTable:\r\n```\r\n<p-dataTable [value]=\"rows\" [otherAttributes]=\"etc\">\r\n    <ng-content select=\"my-custom-component-template\"></ng-content>\r\n    ...\r\n</p-dataTable>\r\n```\r\n\r\nIf I directly replace the ng-content block in the custom component's HTML with the <template let-row> element and it's children, everything works as expected. However, if I use the setup shown above, nothing is displayed in the expanded area when I toggle a row. It seems like whatever is binding \"let-row\" to the data in the associated row doesn't work when the template is projected in using ng-content. \r\n\r\nI've worked around this for now by listening to the onRowExpand event, but this solution only allows me to have one row expanded at a time, which is manageable, but not ideal. Would love to see this functionality in the future."}}
{"actor":{"display_login":"ryanwawr"}}