doesn't recognize given [size] values on initializing

Take this site example for instance:

<split direction="horizontal"> <split-area [size]="40"> <split direction="vertical"> <split-area> <p>Lorem ipsum dolor sit amet...</p> </split-area> <split-area> <p>Sed ut perspiciatis unde omnis iste natus erro...</p> </split-area> <split-area> <p>Lorem ipsum dolor sit amet...</p> </split-area> </split> </split-area> <split-area [size]="60"> <split direction="vertical"> <split-area [size]="25"> <p>Lorem ipsum dolor sit amet...</p> </split-area> <split-area [size]="75"> <p>Sed ut perspiciatis unde omnis iste natus erro...</p> </split-area> </split> </split-area> </split>

What I get is a collapsed view of all panes, except 1 of them which spreads on the rest of the screen (entire)

But when I use routerLink to navigate elsewhere and then use routerLink to navigate back, I get the expected view of the given sizes.

I get this bad behavior on refresh and on lazyloading

Using this inside a mat-nav-container if thats useful

[MattSykes78]

An update from my end:

• Non-nested split in lazy loaded component picks up the sizing on initialization just fine for me.
• I could not get a nested split in lazy loaded component to initialize correctly, however I noticed that if you hide and show the component manually (via a button that changes the visible bound value) it has the correct size, it just hadn’t initialized on component load.

Due to time constraints I have simply worked around the issue by coding the hide and show after the child components in the splits have loaded, eg: this.hideTopPanel = true; this.hideLeftPanel = true; this.ref.detectChanges(); this.hideTopPanel = false; this.hideLeftPanel = false; this.ref.detectChanges();

It now performs as I want, even if the solution is not 100% clean. I was unable to reproduce the issue in stackblitz and there are many sub components in my application creating a lot of variables making it hard to determine the exact cause, without spending a lot of time I don’t currently have.

From what I have observed in the browser development window, the split area element style values of flex and size did not seem to match the ng size bound value on initial load, as to whether that means anything I’m not sure, just thought I’d pass that along.

[bertrandg]

I’ve tested some scenario with a lazy loaded module and code from @sgulakmal (stackblitz) and it works well with current version 2.0.1 so I will close this issue for now.

Feel free to open another with stackblitz demo if you are still experimenting issue.

I’m gonna add a lazy loaded module demo to the website soon.