{"_id":"598622fbd09433000f1b97fc","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-15T08:02:18.397Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":19,"body":"You can make the tree right to left easily by using custom CSS.\nExample:\n\n[block:embed]\n{\n  \"html\": false,\n  \"url\": \"https://rawgit.com/500tech/angular2-tree-component/master/example/cli/dist/#/rtl\",\n  \"title\": \"Cli\",\n  \"favicon\": \"https://rawgit.com/500tech/angular2-tree-component/master/example/cli/dist/favicon.ico\",\n  \"iframe\": true,\n  \"height\": \"220px\"\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<tree-root class=\\\"rtl\\\" [focused]=\\\"true\\\" [nodes]=\\\"nodes\\\"></tree-root>\",\n      \"language\": \"html\",\n      \"name\": \"sample.component.html\"\n    }\n  ]\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \".rtl {\\n    direction: rtl;\\n    .toggle-children-wrapper-collapsed .toggle-children {\\n        transform: rotate(180deg) !important;\\n    }\\n    .tree-children {\\n        padding-right: 20px;\\n        padding-left: 0;\\n    }\\n}\\n\",\n      \"language\": \"css\",\n      \"name\": \"styles.scss\"\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"rtl","type":"basic","title":"RTL"}
You can make the tree right to left easily by using custom CSS. Example: [block:embed] { "html": false, "url": "https://rawgit.com/500tech/angular2-tree-component/master/example/cli/dist/#/rtl", "title": "Cli", "favicon": "https://rawgit.com/500tech/angular2-tree-component/master/example/cli/dist/favicon.ico", "iframe": true, "height": "220px" } [/block] [block:code] { "codes": [ { "code": "<tree-root class=\"rtl\" [focused]=\"true\" [nodes]=\"nodes\"></tree-root>", "language": "html", "name": "sample.component.html" } ] } [/block] [block:code] { "codes": [ { "code": ".rtl {\n direction: rtl;\n .toggle-children-wrapper-collapsed .toggle-children {\n transform: rotate(180deg) !important;\n }\n .tree-children {\n padding-right: 20px;\n padding-left: 0;\n }\n}\n", "language": "css", "name": "styles.scss" } ] } [/block]