{"_id":"59a9e41bb925cb000f923e6d","category":{"_id":"59a9e41bb925cb000f923e5f","version":"59a9e41ab925cb000f923e5c","project":"5707c6875309d117006948d4","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-04-08T14:56:07.661Z","from_sync":false,"order":2,"slug":"documentation","title":"Guides"},"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":[],"next":{"pages":[],"description":""},"createdAt":"2017-07-28T17:23:09.223Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":15,"body":"[block:api-header]\n{\n  \"title\": \"2 way binding to state\"\n}\n[/block]\nYou can control the tree state using 2 way binding.\nThe state includes the following:\n- expandedNodeIds - dictionary of node IDs to booleans\n- activeNodeIds - dictionary of node IDs to booleans\n- hiddenNodeIds - dictionary of node IDs to booleans\n- focusedNodeId - node ID\n\nYou can change the state reference and the tree will respond automatically, and also access the tree state at any time, as it is always updated via the 2-way binding.\n\nExample:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"import { Component } from ':::at:::angular/core';\\nimport { ITreeState } from 'angular-tree-component';\\n\\n@Component({\\n  selector: 'app-saverestore',\\n  template: `\\n    <tree-root [(state)]=\\\"state\\\" [nodes]=\\\"nodes\\\"></tree-root>\\n    <button (click)=\\\"collapseAll()\\\">collapse all</button>\\n    <button (click)=\\\"hideFolders()\\\">hide folders</button>\\n  `,\\n  styles: []\\n})\\nexport class MyComponent {\\n  state: ITreeState;\\n  nodes = [\\n    { id: 1, isFolder: true, name: 'folder1', children: [\\n      { id: 2, name: 'file1', isFolder: false },\\n      { id: 3, name: 'file2', isFolder: false }\\n    ] },\\n    { id: 4, isFolder: false, name: 'flatfile1' },\\n    { id: 5, isFolder: false, name: 'flatfile2' }\\n  ];\\n\\n  collapseAll() {\\n    this.state = {\\n      ...this.state,\\n      expandedNodeIds: {}\\n    };\\n  }\\n\\n  hideFolders() {\\n    const hiddenNodeIds = {};\\n\\n    this.nodes.forEach((node) => {\\n      if (node.isFolder) {\\n        hiddenNodeIds[node.id] = true;\\n      }\\n    });\\n\\n    this.state = {\\n      ...this.state,\\n      hiddenNodeIds\\n    };\\n  }\\n}\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"Persist state to localstorage\"\n}\n[/block]\nThis example is using the 2 way binding to tree state to auto save & restore from localstorage:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<tree-root\\n\\t[state]=\\\"state\\\"\\n  (stateChange)=\\\"setState($event)\\\"\\n  [nodes]=\\\"nodes\\\">\\n</tree-root>\\n\\nclass MyComponent {\\n  state = localStorage.treeState && JSON.parse(localStorage.treeState);\\n  setState(state) {\\n    localStorage.treeState = JSON.stringify(state);\\n  }\\n}\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"Using API\"\n}\n[/block]\nAlternatively, you can use `getState`, `setState` and `subscribe` on treeModel API.\n`subscribe` will callback a function every time state changes.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<tree-root\\n\\t#tree\\n  (initialize)=\\\"onInit(tree)\\\"\\n  [nodes]=\\\"nodes\\\">\\n</tree-root>\\n\\nclass MyComponent {\\n  onInit(tree) {\\n    if (localStorage.treeState) {\\n    \\ttree.treeModel.setState(JSON.parse(localStorage.treeState);\\n    }\\n    tree.treeModel.subscribe((state) => {\\n      localStorage.treeState = JSON.stringify(state);\\n    });\\n  }\\n}\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"save-restore","type":"basic","title":"Tree State Binding"}

Basic

Complete API

Guides

Tree State Binding

[block:api-header] { "title": "2 way binding to state" } [/block] You can control the tree state using 2 way binding. The state includes the following: - expandedNodeIds - dictionary of node IDs to booleans - activeNodeIds - dictionary of node IDs to booleans - hiddenNodeIds - dictionary of node IDs to booleans - focusedNodeId - node ID You can change the state reference and the tree will respond automatically, and also access the tree state at any time, as it is always updated via the 2-way binding. Example: [block:code] { "codes": [ { "code": "import { Component } from '@angular/core';\nimport { ITreeState } from 'angular-tree-component';\n\n@Component({\n selector: 'app-saverestore',\n template: `\n <tree-root [(state)]=\"state\" [nodes]=\"nodes\"></tree-root>\n <button (click)=\"collapseAll()\">collapse all</button>\n <button (click)=\"hideFolders()\">hide folders</button>\n `,\n styles: []\n})\nexport class MyComponent {\n state: ITreeState;\n nodes = [\n { id: 1, isFolder: true, name: 'folder1', children: [\n { id: 2, name: 'file1', isFolder: false },\n { id: 3, name: 'file2', isFolder: false }\n ] },\n { id: 4, isFolder: false, name: 'flatfile1' },\n { id: 5, isFolder: false, name: 'flatfile2' }\n ];\n\n collapseAll() {\n this.state = {\n ...this.state,\n expandedNodeIds: {}\n };\n }\n\n hideFolders() {\n const hiddenNodeIds = {};\n\n this.nodes.forEach((node) => {\n if (node.isFolder) {\n hiddenNodeIds[node.id] = true;\n }\n });\n\n this.state = {\n ...this.state,\n hiddenNodeIds\n };\n }\n}", "language": "javascript" } ] } [/block] [block:api-header] { "title": "Persist state to localstorage" } [/block] This example is using the 2 way binding to tree state to auto save & restore from localstorage: [block:code] { "codes": [ { "code": "<tree-root\n\t[state]=\"state\"\n (stateChange)=\"setState($event)\"\n [nodes]=\"nodes\">\n</tree-root>\n\nclass MyComponent {\n state = localStorage.treeState && JSON.parse(localStorage.treeState);\n setState(state) {\n localStorage.treeState = JSON.stringify(state);\n }\n}", "language": "javascript" } ] } [/block] [block:api-header] { "title": "Using API" } [/block] Alternatively, you can use `getState`, `setState` and `subscribe` on treeModel API. `subscribe` will callback a function every time state changes. [block:code] { "codes": [ { "code": "<tree-root\n\t#tree\n (initialize)=\"onInit(tree)\"\n [nodes]=\"nodes\">\n</tree-root>\n\nclass MyComponent {\n onInit(tree) {\n if (localStorage.treeState) {\n \ttree.treeModel.setState(JSON.parse(localStorage.treeState);\n }\n tree.treeModel.subscribe((state) => {\n localStorage.treeState = JSON.stringify(state);\n });\n }\n}", "language": "javascript" } ] } [/block]