How to expand nested node in angular material tree with nested data?

Question

I am using mat tree in my angular 7 application with nested array of objects data. I want to expand nested section after user doing some changes to the nested section data.

I have a large array of objects I am able to expand first level tree nodes but i am not able to expand nested section.

For example, I have 9.2.1.2 section number so in this case I have to expand sections with section number 9, 9.2, 9.2.1 and 9.2.1.2. How to do it? below is the sample object from array

{
    "sectionNum": 6,
    "title": "ETHICS AND REGULATORY APPROVAL",
    "csrSectionNum": "5",
    "templateDTO": {
      "sectionNum": 89,
      "title": "ETHICS AND REGULATORY APPROVAL",
      "csrSectionNum": "5",
      "parent": "0",
      "sequence": 1,
      "active": 1,
      "subReportTypeId": 2,
      "sectionType": "3",
      "isHighlightSection": 0,
      "children": [],
      "contents": null
    },
    "isDefault": 1,
    "parent": "0",
    "sequence": 1,
    "sectionType": "3",
    "active": 1,
    "studyId": 2,
    "version": 0,
    "userId": 0,
    "createdDate": "2021-04-03 10:03:18",
    "isHighlightSection": 0,
    "sectionIdentifiedPercentage": "100",
    "isBookmarked": false,
    "children": [
      {
        "sectionNum": 7,
        "title": "INDEPENDENT ETHICS COMMITTEE APPROVAL",
        "csrSectionNum": "5.1",
        "templateDTO": {
          "sectionNum": 90,
          "title": "INDEPENDENT ETHICS COMMITTEE APPROVAL",
          "csrSectionNum": "5.1",
          "parent": "5",
          "sequence": 1,
          "active": 1,
          "subReportTypeId": 2,
          "sectionType": "4",
          "isHighlightSection": 0,
          "children": [],
          "contents": null
        },
        "isDefault": 1,
        "parent": "5",
        "sequence": 1,
        "sectionType": "4",
        "active": 1,
        "studyId": 2,
        "version": 0,
        "userId": 0,
        "createdDate": "2021-04-03 10:03:18",
        "isHighlightSection": 0,
        "sectionIdentifiedPercentage": "100",
        "isBookmarked": false,
        "children": [],
        "contents": null,
        "sfdtContent": null,
        "keywordInput": false
      },
      {
        "sectionNum": 8,
        "title": "ETHICAL CONDUCT OF THE STUDY",
        "csrSectionNum": "5.2",
        "templateDTO": {
          "sectionNum": 91,
          "title": "ETHICAL CONDUCT OF THE STUDY",
          "csrSectionNum": "5.2",
          "parent": "5",
          "sequence": 2,
          "active": 1,
          "subReportTypeId": 2,
          "sectionType": "4",
          "isHighlightSection": 0,
          "children": [],
          "contents": null
        },
        "isDefault": 1,
        "parent": "5",
        "sequence": 2,
        "sectionType": "4",
        "active": 1,
        "studyId": 2,
        "version": 0,
        "userId": 0,
        "createdDate": "2021-04-03 10:03:18",
        "isHighlightSection": 0,
        "sectionIdentifiedPercentage": "100",
        "isBookmarked": false,
        "children": [],
        "contents": null,
        "sfdtContent": null,
        "keywordInput": false
      },
      {
        "sectionNum": 9,
        "title": "PATIENT INFORMATION AND CONSENT",
        "csrSectionNum": "5.3",
        "templateDTO": {
          "sectionNum": 92,
          "title": "PATIENT INFORMATION AND CONSENT",
          "csrSectionNum": "5.3",
          "parent": "5",
          "sequence": 3,
          "active": 1,
          "subReportTypeId": 2,
          "sectionType": "0",
          "isHighlightSection": 0,
          "children": [],
          "contents": null
        },
        "isDefault": 1,
        "parent": "5",
        "sequence": 3,
        "sectionType": "0",
        "active": 1,
        "studyId": 2,
        "version": 0,
        "userId": 0,
        "createdDate": "2021-04-03 10:03:18",
        "isHighlightSection": 0,
        "sectionIdentifiedPercentage": "100",
        "isBookmarked": false,
        "children": [],
        "contents": null,
        "sfdtContent": null,
        "keywordInput": false
      }
    ],
    "contents": null,
    "sfdtContent": null,
    "keywordInput": false
  },

score 1 · Answer 1 · answered Apr 05 '21 at 05:18

if you use NestedTreeControl you can call expandDescendants function on this control to expands a subtree rooted at given data node recursively.

treeControl = new NestedTreeControl<any> (node => node.children);
dataSource = new ArrayDataSource(TREE_DATA);

ngOnInit() {
   this.treeControl.dataNodes = TREE_DATA
   this.treeControl.expandDescendants(TREE_DATA[1] /* for example */ )
}

How to expand nested node in angular material tree with nested data?

1 Answers1