Tips on creating a tree view

[xxgreg]

I'd like to create a tree view. Any advice on a good approach?

Here's an example of the kind of tree view I'm thinking about:
https://material.angular.io/components/tree/overview#nested-tree

I'm assuming that a reasonable way to do this is to build a nested structure of md-list, and md-list-item elements with md-icons showing the current expanded/collapsed state, and then add some event handling to toggle these open and closed.

This is what I've got so far. See below. Seems to work ok.

I'll need to find a less manual way to do the indentation. I could make a wrapper component which will take a md-list in a slot and then tweak each of the child element styles to get the indentation right.

Curious if anyone has already done this, or thought about this, and could provide some advice.

Edit: hmm it looks like nesting md-list doesn't work with keyboard navigation. Should I group the children in a plain div instead?

Cheers!

            <md-list class="tree" @click=${this.toggleExpand}>
                <md-list-item type="button" class="expander">
                    <md-icon-button slot="start">
                        <md-icon>expand_more</md-icon>
                    </md-icon-button>
                    <div slot="headline" style="white-space: nowrap;">Group</div>
                </md-list-item>
                <md-list>
                    <md-list-item type="button">
                        <div slot="start" style="width: 60px;"></div>
                        <div slot="headline" style="white-space: nowrap;">Item 1</div>
                    </md-list-item>
                    <md-list-item type="button">
                        <div slot="start" style="width: 60px;"></div>
                        <div slot="headline" style="white-space: nowrap;">Item 2</div>
                    </md-list-item>
                    <md-list-item type="button" class="expander">
                        <md-icon-button slot="start" style="margin-left: 20px;">
                            <md-icon>expand_more</md-icon>
                        </md-icon-button>
                        <div slot="headline" style="white-space: nowrap;">Sub Group</div>
                    </md-list-item>
                    <md-list>
                        <md-list-item type="button">
                            <div slot="start" style="width: 60px;"></div>
                            <div slot="headline" style="white-space: nowrap;">Item 3</div>
                        </md-list-item>
                        <md-list-item type="button">
                            <div slot="start" style="width: 60px;"></div>
                            <div slot="headline" style="white-space: nowrap;">Item 4</div>
                        </md-list-item>
                    </md-list>
                    <md-list-item type="button">
                        <div slot="start" style="width: 40px;"></div>
                        <div slot="headline" style="white-space: nowrap;">Item 5</div>
                    </md-list-item>
                </md-list>
                <md-list-item type="button">
                    <div slot="start" style="width: 40px;"></div>
                    <div slot="headline" style="white-space: nowrap;">Item 6</div>
                </md-list-item>
            </md-list>

    toggleExpand(e:Event) {
        let item: MdListItem | null = null;
        for (let el of e.composedPath()) {
            if (el instanceof MdListItem && el.classList.contains("expander")) {
                item = el;
                break
            }
        }
        if (item == null) {
            return;
        }

        let child = item.nextElementSibling as MdList;

        let attr = item.dataset["expanded"];

        let expanded = attr == "true" || attr === undefined;
        expanded = !expanded; // toggle it.
        item.dataset["expanded"] = expanded ? "true" : "false";

        item.querySelectorAll("md-icon").forEach((icon) => {
            if (icon.textContent == "expand_more") {
                icon.textContent = "chevron_right";
            } else if (icon.textContent == "chevron_right") {
                icon.textContent = "expand_more";
            }
            if (expanded) {
                child.style.display = "inherit";
            } else {
                child.style.display = "none";
            }
        })
    }