How can I create a nested mat-select in Angular? - node.js

Question

I'm new to Angular so if my question is too noobie, please understand.
I have a data structure something like this:
export class Category {
constructor(
public id: string,
public name: string,
public hasChild: boolean,
public parent: string,
public uri: string
) { }
}
export class CategoryTreeItem {
constructor(
public category: Category,
public children: CategoryTreeItem[]
) {}
static createCategoryTree(categories: Category[], parent: string): CategoryTreeItem[] {
const tree: CategoryTreeItem[] = [];
const mainCats = categories.filter(cat => cat.parent === parent);
mainCats.forEach(cat => {
if (cat.hasChild) {
const subCats = this.getCategoryTree(categories, cat.id);
tree.push(new CategoryTreeItem(cat, subCats));
} else {
tree.push(new CategoryTreeItem(cat, null));
}
});
return tree;
}
}
And here is a sample output:
CategoryTreeItem.createCategoryTree(aCategoryArray, null);
// second parameter is null, since I want to get a full tree.
// If I want to start the tree from a specific category, I can give it's ID.
// this will return a data like this:
[
1: CategoryTreeItem {
category: Category {
name: A,
hasChild: true,
parent: null,
uri: a
},
children: [
1: CategoryTreeItem {
category: Category {
name: B,
hasChild: false,
parent: A,
uri: b
}
children: null // null since B.hasChild = false
}
]
},
2: CategoryTreeItem {
category: Category {
name: C,
hasChild: false,
parent: null,
uri: c
},
children: null // null since C.hasChild = false
}
3: CategoryTreeItem {
category: Category {
name: D,
hasChild: true,
parent: null,
uri: d
},
children: [
1: CategoryTreeItem {
category: Category {
name: E,
hasChild: true,
parent: D,
uri: e
}
children: [
// more children since E.hasChild = true
]
},
2: CategoryTreeItem {
category: Category {
name: F,
hasChild: false,
parent: D,
uri: f
}
children: null // null since F.hasChild = false
}
]
},
]
My problem is I have no idea to create a mat-select with this data.
Here is what I tried to do for now:
If a category does have a child category, it should be a <mat-optgroup> and not selectable. In my data structure, products cannot refer to a category which has child categories.
Categories with no child category are going to be <mat-option> placed in it's parent's opt-group.
This way I'm going to have a tree-like-looking mat-select, at least this is what I expect.
Thank you.