GoldenLayout, how to hide/show component?

Question

I have an application based on GoldenLayout (1.5.9). The layout is a Row containing two Columns. See below the configuration of the column I'm interested in.

let config = {
    content: [
        {
            type: "row",
            content: [
                {
                    type: "column",
                    width: 31,
                    content: [
                        {
                            type: "stack",
                            isClosable: false,
                            content: [...]
                        },
                        {
                            type: "component",
                            height: 30,
                            title: "Filters",
                            componentName: "templateComponent"
                        }
                    ]
                },
                ...
            ]
        }
    ]
}

Now I want to be able to close or hide the Component and made it reappears pushing a toolbar button (i.e. programmatically). I made various unsuccessful attempts:

1. If I close the component using the x button, the parent Column magically disappears so a subsequent addChild on the component parent (saved somewhere) adds the component as a child of the Stack. Not what I intended.

2. If I hide the component.element, the component disappears, but an hole remains. That is, the Stack does not resize.

3. I don't find anywhere the documented hide() method on the Component, even if I wrap it in a Row, Column or Stack.

4. If I manually move the separator between the Stack and the Component way down I obtain what I want (that is, to give to the Stack almost all the height) but no combination of setSize(?, ?) seems to do the same programmatically.

Any idea? Thanks!

UPDATE: If I wrap the component into another Stack, the container Column does not disappears so I can add it back:

{
    type: "stack",
    height: 30,
    id: "filtersFrame",
    isClosable: true,
    content: [
        {
            type: "component",
            title: "Filters",
            componentName: "templateComponent",
            componentState: { template: "filter-template" }
        }
    ]
}

Simply the height is ignored (the new stack is always 50% in height) and the knockout template is there but it is not run through knockout. But this is another problem.

Answer 1

I came across this same issue and found an easy solution: Note that I'm using Angular5, so this is in typescript, but the code is easily translatable to vanilla JS.

I found that if you simply call show/hide, the updateSize doesn't do anything, leaving a large empty hole, so you should set the size to 0/[whatever], too.

If you set the size to 0 and call updateSize() without calling hide(), the element will become thin strip.

You must do both for the full effect.

    let smartFormsRow = this._goldenLayout.root.getItemsById("smartformsrow");
    var isHidden = smartFormsRow[0].config.height == 0;
    if (isHidden) {
        smartFormsRow[0].element.show(); //jquery hide
        smartFormsRow[0].config.height = 30; //30%
    } else {
        smartFormsRow[0].element.hide(); //jquery show
        smartFormsRow[0].config.height = 0;
    }

    this._goldenLayout.updateSize();