title: Angular material tree checkbox with real example
body: <p>I saw almost all examples about how to work with angular material tree checkbox such as <a href="https://stackblitz.com/edit/angular-material-tree-checkboxes?file=app%2Ftree-checklist-example.ts" rel="nofollow noreferrer">official example</a> and <a href="https://stackblitz.com/edit/angular-material-tree-structure-example?file=src%2Fapp%2Ftree-checklist-example.ts" rel="nofollow noreferrer">this</a>.<br/>
  In this examples used string array structure. but how can I transform a real nested object array structure to angular material tree checkbox?<br/>
  My structure:</p>
  <p><a href="https://i.stack.imgur.com/250uX.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/250uX.jpg" alt="enter image description here" /></a></p>
  <p>As you see the data that received from the server, say to the client that which item checkbox value is true. and 'Id' must be bind to the tree because of I send this field to the server when user submit the form.<br/>
  This structure is correct? and how can I mapping to angular material tree chechbox.<br/>
  I guess must be change the 'buildFileTree()' or 'transformer()' methods in <a href="https://stackblitz.com/edit/angular-material-tree-checkboxes?file=app%2Ftree-checklist-example.ts" rel="nofollow noreferrer">official example</a>. because when I replace my 'TREE-DATA' with official example 'TREE-DATA'; then I see the follow tree as result.</p>
  <p><a href="https://i.stack.imgur.com/l2USs.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/l2USs.jpg" alt="enter image description here" /></a></p>
  <p>Angular version(7.0.0) Angular Material Version(6.4.7)</p>