{"_id":"598622fbd09433000f1b97f8","category":{"_id":"598622f9d09433000f1b97e0","version":"598622f9d09433000f1b97dd","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":"598622f9d09433000f1b97dd","project":"5707c6875309d117006948d4","__v":1,"createdAt":"2017-08-05T19:56:41.267Z","releaseDate":"2017-08-05T19:56:41.267Z","categories":["598622f9d09433000f1b97de","598622f9d09433000f1b97df","598622f9d09433000f1b97e0","598622f9d09433000f1b97e1"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"4.1.0","version":"4.1.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"}