Angular Material Tree - Different parent/child types

Question

Is there a way to utilize a material tree to represent parent/child data structures where the child has a separate data shape than the parent? My experience with this component seems to indicate that the data structure needs to be a recursion of the same type. However, I would like to use it to represent structures such as Orders (parent) with Order Items (children). This does not seem to be a supported use case. Is that correct?

I've been using Angular since the v2 rollout and I've been using Angular Material since inception. In my opinion, the Tree component seems to be the most cumbersome component with the most difficult to sample code.

Answer 1

I had the same issue, the solution I chose was to make a flatten structure just for tree component. Structure have all the fields from parent and child (if model is used on parent, child fields remain empty and opposite on child node). Seems to work just fine.

From:

export interface ParentModel{
  id: number;
  name: string;    
  child: ChildModel[];    
}

export interface ChildModel{
  id: number;
  symbolName: string;    
  description: string;    
}

to:

export interface TreeModel {
  id: number;
  name: string; 
  symbolName: string;
  description: string;

}