cómo crear Tree en angular 4 con JSON personalizado

Necesito crear Tree, pero tengo un JSON personalizado como el siguiente

[
 {
 "Id": "29",
 "ParentId": "-1",
 "TITLE_AR": "xxxx",
 "TITLE_EN": "xxxx",
 "Level": "1",
 "Hirarchy": "/29",
 "IsActive": true,
 "IsParent": true,
 "isLeaf": false,
 "IsClickable": true,
 "SearchFlag": "0"
 },
 {
 "Id": "30",
 "ParentId": "29",
 "TITLE_AR": "yyyyyy",
 "TITLE_EN": "yyyyyy",
 "Level": "2",
 "Hirarchy": "/29/30",
 "IsActive": true,
 "IsParent": true,
 "isLeaf": false,
 "IsClickable": true,
 "SearchFlag": "0"
 },
 {
 "Id": "31",
 "ParentId": "30",
 "TITLE_AR": "rrrrrr",
 "TITLE_EN": "rrrrrr",
 "Level": "3",
 "Hirarchy": "/29/30/31",
 "IsActive": true,
 "IsParent": false,
 "isLeaf": true,
 "IsClickable": true,
 "SearchFlag": "0"
 },
 {
 "Id": "32",
 "ParentId": "29",
 "TITLE_AR": "cccccccc",
 "TITLE_EN": "cccccccc",
 "Level": "2",
 "Hirarchy": "/29/32",
 "IsActive": true,
 "IsParent": false,
 "isLeaf": true,
 "IsClickable": true,
 "SearchFlag": "0"
 },
 {
 "Id": "35",
 "ParentId": "29",
 "TITLE_AR": "88888888888888",
 "TITLE_EN": "888888888888888888",
 "Level": "2",
 "Hirarchy": "/29/35",
 "IsActive": true,
 "IsParent": false,
 "isLeaf": true,
 "IsClickable": true,
 "SearchFlag": "0"
 }
]

¿Cómo puedo crear el árbol como la imagen de abajo?

He buscado mucho en internet pero sin éxito,

Se ha intentado más de una referencia como

1 - https://www.geeksforgeeks.org/angular-material-tree/

2 - https://www.infragistics.com/products/ignite-ui-angular/angular/components/tree

3 - https://www.lidorsystems.com/help/integralui/web-components/treeview/drag-drop- between -treeviews/

Solución del problema

Al principio, debe transformar su JSON en algo más fácil de usar, algo como esto:

Puedes lograr eso con este código:

json_data = getChildren(json_data, 1);
function getChildren(elements, level) {
 elements.forEach(item => {
 item["children"] = json_data.filter(i => i.ParentId === item.Id);
 getChildren(item["children"], (level + 1));
 })
 elements = elements.filter(item => Number(item.Level) === level);
 return elements;
}

¿Dónde json_dataestá el JSON que publicaste?

Ahora es bastante fácil generar la estructura:

<div class="tree" *ngFor="let node1 of json_data">
 <div class="sub-node-1" *ngFor="let node2 of node1.children">
 <div class="sub-node-2" *ngFor="let node3 of node2.children">
 </div>
 </div>
</div>