{"_id":"5a2ea78e840974003263a492","category":{"_id":"5a2ea78d840974003263a486","version":"5a2ea78d840974003263a484","project":"5707c6875309d117006948d4","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-04-08T14:56:07.661Z","from_sync":false,"order":1,"slug":"documentation","title":"Guides"},"user":"54d742a80771980d0052f4b5","parentDoc":null,"project":"5707c6875309d117006948d4","version":{"_id":"5a2ea78d840974003263a484","project":"5707c6875309d117006948d4","__v":1,"createdAt":"2017-12-11T15:43:09.776Z","releaseDate":"2017-12-11T15:43:09.776Z","categories":["5a2ea78d840974003263a485","5a2ea78d840974003263a486","5a2ea78d840974003263a487","5a2ea78d840974003263a488"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"7.0.0","version":"7.0.0"},"__v":0,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-09-11T13:03:42.933Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":1,"body":"[block:api-header]\n{\n  \"title\": \"Demo\"\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<iframe src=\\\"https://rawgit.com/500tech/angular-tree-component/master/example/cli/dist/#/filter\\\" width=\\\"100%\\\" height=\\\"500px\\\"></iframe>\\n\"\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/filter/filter.component.ts\\\" target=\\\"_blank\\\">Source code for this demo</a>\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"Intro\"\n}\n[/block]\n\nFiltering on the tree will ensure that if a node is visible, then all its ancestors are also visible.\nThis is being taken care of by the treeModel 'filterNodes' function.\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Filter by function\"\n}\n[/block]\nThe function receives the node and returns true if the node should be hidden, false otherwise.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"tree.treeModel.filterNodes((node) => {\\n  return !node.data.name.startsWith(text);\\n});\\n\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Filter by string\"\n}\n[/block]\nThe function filters all nodes whose displayField ('name' by default) contains the given string. The comparison is done case insensitive.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"tree.treeModel.filterNodes(\\\"text\\\", true);\\n\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nNote the second field - true by default.\nThis flag makes sure all nodes are visible after searching (i.e. expand all relevant ancestors).\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Filtering by API\"\n}\n[/block]\nYou can traverse the tree and do your own magic, and call `hide()`, `show()`, or `setIsHidden(value)` on all nodes as you wish.\n[block:api-header]\n{\n  \"title\": \"Filtering by 2-way binding\"\n}\n[/block]\nYou can bind to the tree state and supply a dictionary of hidden node IDs.\nSee [2-way binding to state](doc:save-restore) for more information.","excerpt":"","slug":"filtering","type":"basic","title":"Filtering"}
[block:api-header] { "title": "Demo" } [/block] [block:html] { "html": "<iframe src=\"https://rawgit.com/500tech/angular-tree-component/master/example/cli/dist/#/filter\" width=\"100%\" height=\"500px\"></iframe>\n" } [/block] [block:html] { "html": "<a href=\"https://github.com/500tech/angular-tree-component/blob/master/example/cli/src/app/filter/filter.component.ts\" target=\"_blank\">Source code for this demo</a>" } [/block] [block:api-header] { "title": "Intro" } [/block] Filtering on the tree will ensure that if a node is visible, then all its ancestors are also visible. This is being taken care of by the treeModel 'filterNodes' function. [block:api-header] { "type": "basic", "title": "Filter by function" } [/block] The function receives the node and returns true if the node should be hidden, false otherwise. [block:code] { "codes": [ { "code": "tree.treeModel.filterNodes((node) => {\n return !node.data.name.startsWith(text);\n});\n", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "Filter by string" } [/block] The function filters all nodes whose displayField ('name' by default) contains the given string. The comparison is done case insensitive. [block:code] { "codes": [ { "code": "tree.treeModel.filterNodes(\"text\", true);\n", "language": "javascript" } ] } [/block] Note the second field - true by default. This flag makes sure all nodes are visible after searching (i.e. expand all relevant ancestors). [block:api-header] { "type": "basic", "title": "Filtering by API" } [/block] You can traverse the tree and do your own magic, and call `hide()`, `show()`, or `setIsHidden(value)` on all nodes as you wish. [block:api-header] { "title": "Filtering by 2-way binding" } [/block] You can bind to the tree state and supply a dictionary of hidden node IDs. See [2-way binding to state](doc:save-restore) for more information.