mat tree parent without children

Question

How can i display parent that has no children, as parent with children? i want parent without children has same design as parent with children. stackblitz

interface FoodNode {
  name: string;
  children?: FoodNode[];
}

const TREE_DATA: FoodNode[] = [
  {
    name: 'Fruit',
    children: [{name: 'Apple'}, {name: 'Banana'}, {name: 'Fruit loops'}],
  },
  {
    name: 'Vegetables',
    children: [
      {
        name: 'Green',
        children: [{name: 'Broccoli'}, {name: 'Brussels sprouts'}],
      },
      {
        name: 'Orange',
        children: [{name: 'Pumpkins'}, {name: 'Carrots'}],
      },
    ],
  },
  {
    name: 'testing',
  },
];

  treeControl = new NestedTreeControl<FoodNode>(node => node.children);
  dataSource = new MatTreeNestedDataSource<FoodNode>();

  constructor() {
    this.dataSource.data = TREE_DATA;
  }

  hasChild = (_: number, node: FoodNode) => !!node.children && node.children.length > 0;

Answer 1

Do you then mean like... a regular list then? https://material.angular.io/components/list/overview

Nesting parent-child creates all the relations for how the tree is rendered e.g if there is no child, how do we know how to indent tree items? Or how do we know which element should be collapsible etc. If you want to keep same appearance and functioning, but because of data structure (nested arrays and object) you'd like to avoid tree structure I would suggest to take your time and get familiar how to use such a data structure - no point in reinventing the wheel.