{"_id":"59a9e41bb925cb000f923e64","category":{"_id":"59a9e41bb925cb000f923e5d","version":"59a9e41ab925cb000f923e5c","project":"5707c6875309d117006948d4","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2017-07-15T07:28:09.870Z","from_sync":false,"order":0,"slug":"getting-started","title":"Basic"},"project":"5707c6875309d117006948d4","user":"54d742a80771980d0052f4b5","parentDoc":null,"version":{"_id":"59a9e41ab925cb000f923e5c","project":"5707c6875309d117006948d4","__v":1,"createdAt":"2017-09-01T22:50:02.967Z","releaseDate":"2017-09-01T22:50:02.967Z","categories":["59a9e41bb925cb000f923e5d","59a9e41bb925cb000f923e5e","59a9e41bb925cb000f923e5f","59a9e41bb925cb000f923e60"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"5.0.0","version":"5.0.0"},"__v":0,"updates":["59493b6ef4a8980024dd03a7"],"next":{"pages":[],"description":""},"createdAt":"2016-09-14T12:53:07.772Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":3,"body":"You can customize the tree's templates using embedded `ng-template` tags\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Note: Angular 2 vs. 4\",\n  \"body\": \"In Angular 2 you should use `<template>` tag, whereas in Angular 4 it's `<ng-template>`\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"#treeNodeTemplate\"\n}\n[/block]\nUse `#treeNodeTemplate` for the content of the node.\nYou will have access to the following variables:\nnode: of type TreeNode. Exposes many useful methods, as well as a `data` attribute with the original node's data.\nindex: The index of the current node in the parent's children.\n\nFor example:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<tree-root [nodes]=\\\"nodes\\\">\\n  <ng-template #treeNodeTemplate let-node let-index=\\\"index\\\">\\n\\t  <span>{{ node.data.name }}</span>\\n\\t  <button (click)=\\\"go($event)\\\">Custom Action</button>\\n  </ng-template>\\n</tree-root>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"#treeNodeWrapperTemplate\"\n}\n[/block]\nThis option is useful in case all you need to further customise the expander location and the node's event listeners.\n\nStart by specifying the following template, and make sure the tree still renders as expected.\nThen remove / change whatever you need:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<tree-root [nodes]=\\\"nodes\\\">\\n  <ng-template #treeNodeWrapperTemplate let-node let-index=\\\"index\\\">\\n    <div class=\\\"node-wrapper\\\" [style.padding-left]=\\\"node.getNodePadding()\\\">\\n      <tree-node-expander [node]=\\\"node\\\"></tree-node-expander>\\n      <div class=\\\"node-content-wrapper\\\"\\n        [class.node-content-wrapper-active]=\\\"node.isActive\\\"\\n        [class.node-content-wrapper-focused]=\\\"node.isFocused\\\"\\n        (click)=\\\"node.mouseAction('click', $event)\\\"\\n        (dblclick)=\\\"node.mouseAction('dblClick', $event)\\\"\\n        (contextmenu)=\\\"node.mouseAction('contextMenu', $event)\\\"\\n        (treeDrop)=\\\"node.onDrop($event)\\\"\\n        [treeAllowDrop]=\\\"node.allowDrop\\\"\\n        [treeDrag]=\\\"node\\\"\\n        [treeDragEnabled]=\\\"node.allowDrag()\\\">\\n\\n        <tree-node-content [node]=\\\"node\\\" [index]=\\\"index\\\"></tree-node-content>\\n      </div>\\n    </div>\\n  </ng-template>\\n</tree-root>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"#loadingTemplate\"\n}\n[/block]\nFor asynchronous data loading, use `#loadingTemplate` to customize the message that appears while loading the children.\n\nFor example:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<tree-root [nodes]=\\\"nodes\\\">\\n  <template #loadingTemplate>Loading, please hold....</template>\\n</tree-root>\",\n      \"language\": \"text\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"#treeNodeFullTemplate\"\n}\n[/block]\nThis option is useful in case all other customisation options are not suitable for you.\nIt allows for full customisation of the node, as it replaces the internal template for the TreeNode component.\n\nStart by specifying the following template, and make sure the tree still renders as expected.\nThen remove / change whatever you need:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<ng-template #treeNodeFullTemplate\\n          let-node\\n          let-index=\\\"index\\\"\\n          let-templates=\\\"templates\\\">\\n  <div\\n    [class]=\\\"node.getClass()\\\"\\n    [class.tree-node]=\\\"true\\\"\\n    [class.tree-node-expanded]=\\\"node.isExpanded && node.hasChildren\\\"\\n    [class.tree-node-collapsed]=\\\"node.isCollapsed && node.hasChildren\\\"\\n    [class.tree-node-leaf]=\\\"node.isLeaf\\\"\\n    [class.tree-node-active]=\\\"node.isActive\\\"\\n    [class.tree-node-focused]=\\\"node.isFocused\\\">\\n\\n    <tree-node-drop-slot\\n                         *ngIf=\\\"index === 0\\\"\\n                         [dropIndex]=\\\"node.index\\\"\\n                         [node]=\\\"node.parent\\\">\\n    </tree-node-drop-slot>\\n\\n    <tree-node-wrapper [node]=\\\"node\\\" [index]=\\\"index\\\" [templates]=\\\"templates\\\">\\n    </tree-node-wrapper>\\n\\n    <tree-node-children [node]=\\\"node\\\" [templates]=\\\"templates\\\">\\n    </tree-node-children>\\n    <tree-node-drop-slot [dropIndex]=\\\"node.index + 1\\\" [node]=\\\"node.parent\\\">\\n    </tree-node-drop-slot>\\n  </div>\\n</ng-template>\\n\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Note!\",\n  \"body\": \"Do not remove `let-templates=\\\"templates\\\"` and passing `[templates]=\\\"templates\\\"` to `tree-node-children`. If you do that, the children of your nodes will not receive the custom template you provided.\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"Demo\"\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<iframe height=\\\"400px\\\" width=\\\"400px\\\" src=\\\"https://rawgit.com/500tech/angular2-tree-component/master/example/cli/dist/index.html#templates\\\"></iframe>\\n\\n<style></style>\"\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<a href=\\\"https://github.com/500tech/angular-tree-component/blob/master/example/cli/src/app/templates/templates.component.ts\\\" target=\\\"_blank\\\">Source code for this demo</a>\\n\"\n}\n[/block]","excerpt":"","slug":"templates","type":"basic","title":"Custom Templates"}
You can customize the tree's templates using embedded `ng-template` tags [block:callout] { "type": "info", "title": "Note: Angular 2 vs. 4", "body": "In Angular 2 you should use `<template>` tag, whereas in Angular 4 it's `<ng-template>`" } [/block] [block:api-header] { "type": "basic", "title": "#treeNodeTemplate" } [/block] Use `#treeNodeTemplate` for the content of the node. You will have access to the following variables: node: of type TreeNode. Exposes many useful methods, as well as a `data` attribute with the original node's data. index: The index of the current node in the parent's children. For example: [block:code] { "codes": [ { "code": "<tree-root [nodes]=\"nodes\">\n <ng-template #treeNodeTemplate let-node let-index=\"index\">\n\t <span>{{ node.data.name }}</span>\n\t <button (click)=\"go($event)\">Custom Action</button>\n </ng-template>\n</tree-root>", "language": "html" } ] } [/block] [block:api-header] { "title": "#treeNodeWrapperTemplate" } [/block] This option is useful in case all you need to further customise the expander location and the node's event listeners. Start by specifying the following template, and make sure the tree still renders as expected. Then remove / change whatever you need: [block:code] { "codes": [ { "code": "<tree-root [nodes]=\"nodes\">\n <ng-template #treeNodeWrapperTemplate let-node let-index=\"index\">\n <div class=\"node-wrapper\" [style.padding-left]=\"node.getNodePadding()\">\n <tree-node-expander [node]=\"node\"></tree-node-expander>\n <div class=\"node-content-wrapper\"\n [class.node-content-wrapper-active]=\"node.isActive\"\n [class.node-content-wrapper-focused]=\"node.isFocused\"\n (click)=\"node.mouseAction('click', $event)\"\n (dblclick)=\"node.mouseAction('dblClick', $event)\"\n (contextmenu)=\"node.mouseAction('contextMenu', $event)\"\n (treeDrop)=\"node.onDrop($event)\"\n [treeAllowDrop]=\"node.allowDrop\"\n [treeDrag]=\"node\"\n [treeDragEnabled]=\"node.allowDrag()\">\n\n <tree-node-content [node]=\"node\" [index]=\"index\"></tree-node-content>\n </div>\n </div>\n </ng-template>\n</tree-root>", "language": "html" } ] } [/block] [block:api-header] { "type": "basic", "title": "#loadingTemplate" } [/block] For asynchronous data loading, use `#loadingTemplate` to customize the message that appears while loading the children. For example: [block:code] { "codes": [ { "code": "<tree-root [nodes]=\"nodes\">\n <template #loadingTemplate>Loading, please hold....</template>\n</tree-root>", "language": "text" } ] } [/block] [block:api-header] { "type": "basic", "title": "#treeNodeFullTemplate" } [/block] This option is useful in case all other customisation options are not suitable for you. It allows for full customisation of the node, as it replaces the internal template for the TreeNode component. Start by specifying the following template, and make sure the tree still renders as expected. Then remove / change whatever you need: [block:code] { "codes": [ { "code": "<ng-template #treeNodeFullTemplate\n let-node\n let-index=\"index\"\n let-templates=\"templates\">\n <div\n [class]=\"node.getClass()\"\n [class.tree-node]=\"true\"\n [class.tree-node-expanded]=\"node.isExpanded && node.hasChildren\"\n [class.tree-node-collapsed]=\"node.isCollapsed && node.hasChildren\"\n [class.tree-node-leaf]=\"node.isLeaf\"\n [class.tree-node-active]=\"node.isActive\"\n [class.tree-node-focused]=\"node.isFocused\">\n\n <tree-node-drop-slot\n *ngIf=\"index === 0\"\n [dropIndex]=\"node.index\"\n [node]=\"node.parent\">\n </tree-node-drop-slot>\n\n <tree-node-wrapper [node]=\"node\" [index]=\"index\" [templates]=\"templates\">\n </tree-node-wrapper>\n\n <tree-node-children [node]=\"node\" [templates]=\"templates\">\n </tree-node-children>\n <tree-node-drop-slot [dropIndex]=\"node.index + 1\" [node]=\"node.parent\">\n </tree-node-drop-slot>\n </div>\n</ng-template>\n", "language": "html" } ] } [/block] [block:callout] { "type": "info", "title": "Note!", "body": "Do not remove `let-templates=\"templates\"` and passing `[templates]=\"templates\"` to `tree-node-children`. If you do that, the children of your nodes will not receive the custom template you provided." } [/block] [block:api-header] { "title": "Demo" } [/block] [block:html] { "html": "<iframe height=\"400px\" width=\"400px\" src=\"https://rawgit.com/500tech/angular2-tree-component/master/example/cli/dist/index.html#templates\"></iframe>\n\n<style></style>" } [/block] [block:html] { "html": "<a href=\"https://github.com/500tech/angular-tree-component/blob/master/example/cli/src/app/templates/templates.component.ts\" target=\"_blank\">Source code for this demo</a>\n" } [/block]