Swapping components

Help Requests
1

The dynamic composition docs suggest that the au-compose element is suitable for “Dynamically swap[ping] components based on user state or configuration” but the examples demonstrate doing this with literal values (strings, literal objects, template strings etc)

The scenario is a hierarchy where the different levels represent different types and a component is defined per type, for example folders and files. My hope was that I could just bind a different model to the same component if selecting another node of the same type but also swap out the component if selecting a node of a different type, something like this:

template.html

<au-compose component.bind="currentComponent" model.bind="currentModel"></au-compose>

template.ts

folderDetailComponent = new FolderDetailComponent();
fileDetailComponent = new FileDetailComponent();

treeview.on("itemClick", (itemClickEventArgs) => {
    console.log(itemClickEventArgs);
    switch (itemClickEventArgs.itemData.type) {
        case "Folder":
            this.currentComponent = this.folderDetailComponent;
            break;
        case "File":
            this.currentComponent = this.fileDetailComponent;
            break;
    }

    this.currentModel = itemClickEventArgs.itemData;
});

However this doesn’t seem to work. Is there something I’m missing about this approach or is there a more idiomatic solution?

Thanks