GeezerVison is showing github.com — breaking changes · Issue #482 · angular-split/angular-split
DescriptionDescribe the bug
Hi we have updated to version 18 from 16.2.1 and there seem to be breaking changes
it doesnt seem to be [order] property anymore for as-split-area, how does that effect our code.
Also there doesnt seem to be IAreaSize and dragend event IoutputData, please advise how
I can change the code as all of the areaes now collapsing. eventhough they are 50% set by binding
Thanks
Shahi ActivityHarpush commented on Dec 2, 2024 Unfortunately our docs are lacking...
Anyway:
- Order input gone and DOM order is strictly used
IOutputData is now called SplitGutterInteractionEventIAreaSize is now called SplitAreaSize Jefiozie commented on Dec 5, 2024 I've updated the docs today I hope this helps you. As @Harpush mentioned somethings are lacking and we are working on fixing the docs. Reacted by Eamon O'Tuathail alexciesielski commented on Dec 7, 2024 How to programatically open a detail area now after v18 update?
Harpush commented on Dec 7, 2024 @alexciesielski this is not possible anymore due to how angular signal inputs work. This is a general bad practice now with signals. You should use the bindings instead. alexciesielski commented on Dec 7, 2024 There are legit use cases that require programmatic access and modification of these values, this is a regression.
Have you considered changing the input signals to model signals? They work like inputs but allow programmatic setting. Harpush commented on Dec 7, 2024 Can you share such legit case? Even with models as far as I am aware the recommended approach is bindings.
The only problematic cases are dynamic components and directive decoration and I don't think this is the case here. B1Dobbs commented on Dec 11, 2024
Unfortunately our docs are lacking... Anyway:
1. Order input gone and DOM order is strictly used
2. `IOutputData` is now called `SplitGutterInteractionEvent`
3. `IAreaSize` is now called `SplitAreaSize`
Hey @Harpush, how would you recommend inserting an as-split-area at a specific index without the order input?
Our application creates dynamic split views from user input by a context menu on the as-split-area. On split from user input, a new as-split-area is added to the list and the order field was set to "insert" it after the index of the area the user intended to slit.
Please advise on an alternative that is not directly accessing the DOM! Thanks Harpush commented on Dec 11, 2024 @B1Dobbs A code sample of what you are doing today (simplified) would help. As a general idea I would do something with @for but it's tough to understand without an exanple B1Dobbs commented on Dec 12, 2024
@B1Dobbs A code sample of what you are doing today (simplified) would help. As a general idea I would do something with @for but it's tough to understand without an example
@Harpush Thanks for the quick follow up. I can provide a simplified template as an example and try to explain the rest.
There are basically two separate use cases we have:
- Insert area at a specific index
- Re-order areas based on user input (not shown for simplicity)
The example uniquely identifies an area by id, and order is used to ensure they are displayed in same order they are in the array. If I remove order, the split areas areas are always be shown in the order in which they were added for some reason. The order they are in the array is completely ignored.
Here is an example template:
<as-split>
@for (area of areas; track area.id) {
<as-split-area [order]="areas.indexOf(area)" [cdkContextMenuTriggerFor]="context_menu">
<ng-template #context_menu>
<div cdkMenu>
<button cdkMenuItem (click)="split(area)">Split</button>
<button cdkMenuItem (click)="close(area)">Close</button>
</div>
</ng-template>
<ng-container *ngComponentOutlet="area.component"></ng-container>
</as-split-area>
}
</as-split>
- There is an internal list of
areas which is iterated over using @for as you mentioned with area.id for tracking.
- The
order field is set with the index of the area in the list to enforce the order in areas.
- Each split area has a context menu with two options:
- Split - inserts a new area at the index of the old area
- Close - removes the area
Maybe I'm missing something? For loops are supposed to display in the order they were in the array, and I tested it does by adding something to display the area's id outside of the split areas, but angular split seems to be changing the order.
Any guidance would be appreciated! Harpush commented on Dec 12, 2024 @B1Dobbs Are you sure that happens on version 18 on the split? Mind opening a stackblitz with a reproduction? The new version should work as you expect without order. B1Dobbs commented on Dec 12, 2024
@B1Dobbs Are you sure that happens on version 18 on the split? Mind opening a stackblitz with a reproduction? The new version should work as you expect without order.
I was working off of the 17.1.1 because I strictly looked at the PR summary: #444
I saw this: "Order input is now gone as order is taken strictly from DOM order. Can be added back if required but seems like larger API surface with low benefit". It seems to imply it was always using the DOM order and order was simply extra without added benefit. Didn't say there were additional changes to use the DOM order instead because it wasn't using it previously. The change log isn't updated so didn't really have much to go on.
I'll give it a go in the latest version. Harpush commented on Dec 12, 2024 Features section number 4:
No more order problems when hiding and showing areas (that's why the input order was created before)
But it is easy to miss the correlation between the two. I also agree we lack an updated changelog. Reacted by Brooke Dobbins grafanauser commented on Jan 9, 2025 another breaking change for angular-split 17.2.0 -> 18.0.0:
SplitAreaDirective is not accessable anymore to expand and collapse via code
This
import { SplitAreaDirective } from 'angular-split';
triggers this
Module '"angular-split"' has no exported member 'SplitAreaDirective'.ts(2305)
We use SplitAreaDirective in combination with @ViewChild like this, to expand and collapse things:
@ViewChild('projectSidebar', { read: SplitAreaDirective, static: false }) projectSidebar!: SplitAreaDirective;
//..
this.projectSidebar.expand();
//..
this.projectSidebar.collapse(40)The change log seems to be bugged too:
https://github.com/angular-split/angular-split/blob/main/CHANGELOG.md
https://angular-split.github.io/changelog
 Harpush commented on Jan 9, 2025
another breaking change for angular-split 17.2.0 -> 18.0.0: SplitAreaDirective is not accessable anymore to expand and collapse via code
This import { SplitAreaDirective } from 'angular-split'; triggers this Module '"angular-split"' has no exported member 'SplitAreaDirective'.ts(2305)
We use SplitAreaDirective in combination with @ViewChild like this, to expand and collapse things:
@ViewChild('projectSidebar', { read: SplitAreaDirective, static: false }) projectSidebar!: SplitAreaDirective;
//..
this.projectSidebar.expand();
//..
this.projectSidebar.collapse(40)The change log seems to be bugged too:
https://github.com/angular-split/angular-split/blob/main/CHANGELOG.md 
https://angular-split.github.io/changelog 
- The
SplitAreaDirective was renamed to SplitAreaComponent.
- Collapse and expand were removed. Either use hide or ngIf or vote in RFC: Angular Split with Snap feature #458 or let us know what you need it for.
grafanauser commented on Jan 9, 2025 oh that is sad. I added a comment there. In this case we cannot update. Jefiozie commented on Jan 11, 2025 There are several comments around the breaking changes here. But in my opinion we at least answered most of the questions. We will try to do our best in upcoming releases to better document the breaking changes and we have already release ld a beta version of 19.
If there is still need for some help please reopen a new issue as I think we've awnserd the original question.
Feel free to comment and reopen if the topic is related to the first question. Otherwise a new issue would be preferred.
MetadataMetadataDevelopmentNo branches or pull requestsIssue actions
|
