Question: Is there a way to start in collapse() state?

[grafanauser]

update 2:

okay, It is not directly a problem with angular-split.
The reason in my project is that when the component is created the <as-split> is hidden by *ngif. Because of that initializing it does not work in ngOnInit or ngAfterViewChild because that is too early as the ngif is still false until the user is pressing some buttons. I cannot remove that ngif and will have to find a different workaround.

would be nice to have something liek that <as-split-area collapse="20" size="400"> to initialize the as-split-area with collapse(20) to prevent problems like that.

update

i think i found the issue. I think it is caused by *ngif which prevents the split component to be loaded on startup and thus it is undefined in ngOnInit and ngAfterViewChild. I have to check that and will update this issue again, if that is the case. A classical case of not getting something to work for a whole day. Then finally writing an issue and instantly after writing it, having an idea which could solve it....

original issue

Is your feature request related to a problem? Please describe.
That is not really a feature request i think, but rather a question whether this is already possible

What I want:

• I have an as-split
  • <as-split unit="pixel" direction="vertical" useTransition="true" gutterSize="5">
• The as-split contains 2 as-split-area.
  • <as-split-area size="*">
  • <as-split-area #myStatusBar size="400" minSize="150" >
• the bottom as-split-area should act like a status bar. When it is collapsed it will show little information. But the user can click on a button to expand this status bar, to show more information. The User can click on the button again to collapse the status bar again to show only little information.
• I access the statusBar as-split-area this way
  • @ViewChild('myStatusBar', { read: SplitAreaDirective, static: false }) myStatusBar!: SplitAreaDirective;
• i use those methods to expand and collapse it:
  • this.myStatusBar.expand()
  • this.myStatusBar.collapse(60)

My Problem:

• Everything works fine, except one thing: on programm startup the area is in the expanded state. I tried to use this.myStatusBar.collapse(60); in ngOnInit() and ngAfterViewInit() but it still stays expanded on startup.
• Is there a way to start the as-split-area in collapsed state?

by the way, the package is really awesome. It helped me a lot in creating a flexibel UI so far :)

[Harpush]

If the button is inside the status bar split area it means once clicked the split area is already rendered and the view child should be populated.
Maybe I didn't fully understand and a stack blitz will help here

[grafanauser]

I forgot the details because it was long time ago. But It boils down to this feature request:
being able to initialize the as-split area in the collapsed state with a custom collapsed-size like that

<as-split-area collapse="20" size="400">

[Harpush]

Can you please explain the benefits of collapsed? You can start with specific size for that split-area or if split drag is not needed why is it a part of the splitter?
How collapsing and having a size helps your use case? A stack blitz with minimum repro can help a lot.

[grafanauser]

the idea is that it starts in collapsed state as a statusbar showing some information. The collapsed state size has to be set to a fixed height because of the content it has to display. the user must not be able to drag the size of it. but the user can click on this statusbar. then it expands to a bigger area that the user can increase/reduce in size. This bigger area shows a table with log messages. The user can then click a button to collapse it again to become the fixed height statusbar again. So we have to states:

• non-resizable collapsed status bar (initial state and most of the time the default state)

• resizable log table area (optional state)

[Harpush]

Isn't it actually lock size? You start with size X locked. Once button clicked you resize to size Y and unlock. Or do you want the gutter to look different in each case?

Anyway this requires changing the size of a specific area and aligning others as if the user dragged but from code which I am pretty sure doesn't exist now.

Starting in collapsed state isn't supported now indeed. I would like to evaluate how collapse works today and if this is the desired behavior before adding this feature as locking seems more correct here and I would expect collapse to shrink to zero with gutter still available for resize.

[grafanauser]

for the status bar the gutter shouldnt be visible while it should be visible for the resizable log table area. But i dont know what lock size means, maybe i missed a feature.
I got this status bar thing working, but it is very specific code. in general what i do is, i accept that it starts in expanded state but my javascript code calls the collapse method on the area on initialization of my website. So currently i am in no need of this feature. I just thought it would be a nice to have feature to start in collapsed state without a javascript workaround.