{"_id":"5aff027686c0a90003b9239d","category":{"_id":"5aff027686c0a90003b923b1","version":"5aff027686c0a90003b923b4","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":"5aff027686c0a90003b923b4","project":"5707c6875309d117006948d4","__v":0,"forked_from":"5ab4fbd96316b00012bd8970","createdAt":"2018-03-23T13:06:33.352Z","releaseDate":"2018-03-23T13:06:33.352Z","categories":["5aff027686c0a90003b923b1","5aff027686c0a90003b923b2","5aff027686c0a90003b923b3"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"7.2.0","version":"7.2.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":6,"body":"You can control the tree state using 2-way binding.\nThe state includes the following:\n- expandedNodeIds - dictionary of node IDs to booleans\n- selectedLeafNodeIds - 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  [nodes]=\\\"nodes\\\">\\n</tree-root>\\n\\nclass MyComponent {\\n  get state() {\\n    return localStorage.treeState && JSON.parse(localStorage.treeState);\\n  }\\n  set state(state) {\\n    localStorage.treeState = JSON.stringify(state);\\n  }\\n}\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nDemo:\n[block:html]\n{\n  \"html\": \"<iframe src=\\\"https://rawgit.com/500tech/angular-tree-component/master/example/cli/dist/#/save-restore\\\" width=\\\"100%\\\" height=\\\"300px\\\"></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/save-restore/save-restore.component.ts\\\" target=\\\"_blank\\\">Source code for this demo</a>\"\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":"2-way binding to state"}

Basic

Guides

API reference

2-way binding to state

You can control the tree state using 2-way binding. The state includes the following: - expandedNodeIds - dictionary of node IDs to booleans - selectedLeafNodeIds - 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 [nodes]=\"nodes\">\n</tree-root>\n\nclass MyComponent {\n get state() {\n return localStorage.treeState && JSON.parse(localStorage.treeState);\n }\n set state(state) {\n localStorage.treeState = JSON.stringify(state);\n }\n}", "language": "javascript" } ] } [/block] Demo: [block:html] { "html": "<iframe src=\"https://rawgit.com/500tech/angular-tree-component/master/example/cli/dist/#/save-restore\" width=\"100%\" height=\"300px\"></iframe>\n" } [/block] [block:html] { "html": "<a href=\"https://github.com/500tech/angular-tree-component/blob/master/example/cli/src/app/save-restore/save-restore.component.ts\" target=\"_blank\">Source code for this demo</a>" } [/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]