-
Notifications
You must be signed in to change notification settings - Fork 160
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Wrong display order on Angular 9 #189
Comments
I have the same issue. Any update on this? |
A temporary solution is to use the onUpdate hook of the sortable-js options object and overwrite the sortablejs bindingTarget in it. This forces Angular's change detection to run and re-render the ngFor correctly.
The data will then be rendered correctly. Note: I also tried to omit the Angular2-Binding and use sortablejs directly with Angular, but this leads to the same problem. So maybe this problem is also/more related to the original sortablejs library. |
I guess this is the same issue that Dragula faces. It seems to be related to the Ivy compiler. I experienced the exact same issue for Dragula and Sortable. Here is a solution for Dragula: https://stackoverflow.com/questions/63532041/ng2-dragula-after-adding-new-item-its-getting-displayed-at-the-top/63609337#63609337 Can we somehow apply the same for Sortable? For now Iv'e switched to Dragula but I would love to switch back as soon as this bug is gone or can be worked around. |
Hi there; Can you please try version 3.1.3 and let me know if it' s working for you too or not? I' m using 3.1.3 on Angular 10, it' s working fine. But later versions have this bug & i cannot update ngx-sortable because of that. Related topic which i opened is: #202 |
Same problem here! Angular 10 with ngx-sortablejs 10.1.0. |
Problem persists with:
|
Same problem here! Angular 13.1.0 with ngx-sortablejs 11.1.0. |
i think |
Having the same issue. In my case, i am unable/willing to overwrite/rebind the data since its a FormArray originating from the parent component (and i do not want to sever that connection). As a really rough temporary fix, i'm just hiding the whole element with ngIf for a split second
added to the element:
and to make sure that the trick is only used in case drag was used, ive added "orderChanged " into dragend:
|
Still experiencing this problem with: Angular @ 13.3.2 |
For anyone suffering with this problem, I found this worked for me:
It seems like re-assigning the data triggers Angular to re-render the *ngFor section, which means items are displayed in the correct order. |
Any news? |
any update on this? |
Just use drag and drop from @angular/cdk. It is way more better. |
And how does that work for grids, both horizontal and vertical at the same time? Say a 3 by 4 grid. Horizontal first, then next row... |
Description
Only a single draggable
div
as follows:If an item is moved to the last position, when another item is addeded via code
this.selectedItems.push(item)
the list of items visualized is sorted wrongly.The array items order is correct, but the visual representation of it is not.
I guess it's some incompatibility between
sortablejs
/ngx-sortablejs
andAngular 9
, since if I try to reproduce the issue on aAngular 8
project it doesn't happen.How to reproduce
I uploaded a sample project here.
The code is very simple, it's just a new Angular application with changes on
app.component.ts
andapp.component.html
.If you don't want to download the sample you can just follow these steps:
ng new <project_name>
npm i -S ngx-sortablejs sortablejs
npm i -D @types/sortablejs
SortablejsModule
inAppModule.ts
app.component.ts
andapp.component.html
according to the sample linked above.Environment
I tested this on
Angular 9.0.7
andAngular 8.2.14
.Versions mentioned above are those indicated in
<app-root ng-version="">
.The issue shows up only on
Angular 9
.The text was updated successfully, but these errors were encountered: