Adding slides with unshift(), splice() or anything other than push() throws error

[i1zivkovic]

Packages

"@angular/animations": "^10.1.4",
"@angular/cdk": "^10.2.4",
"@angular/common": "^10.1.4",
"@angular/compiler": "^10.1.4",
"@angular/core": "^10.1.4",
"@angular/forms": "^10.1.4",
"@angular/platform-browser": "^10.1.4",
"@angular/platform-browser-dynamic": "^10.1.4",
"@angular/pwa": "^0.1001.4",
"@angular/router": "^10.1.4",
"@angular/service-worker": "^10.1.4",
"jquery": "^3.5.1",
"slick-carousel": "^1.8.1",
"ngx-slick-carousel": "^0.5.0",

HTML

<button (click)="addQuantity(23)">add</button>

<ngx-slick-carousel class="carousel quantities-carousel" #quantitiesCarousel="slick-carousel" [config]="config" (init)="onInit($event)">
<div ngxSlickItem *ngFor="let quantity of quantities" class="slide">
<span>{{quantity}}</span>
</div>
</ngx-slick-carousel>

TS

public quantities: number[] = [1,2,3,4];

public addQuantity(quantity: number): void {
    this.quantities.unshift(quantity);
    return;
}

Chrome console:

ERROR DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
    at EmulatedEncapsulationDomRenderer2.insertBefore (http://localhost:4200/vendor.js:102696:20)
    at BaseAnimationRenderer.insertBefore (http://localhost:4200/vendor.js:137307:23)
    at nativeInsertBefore (http://localhost:4200/vendor.js:14923:18)
    at applyToElementOrContainer (http://localhost:4200/vendor.js:14503:13)
    at applyNodes (http://localhost:4200/vendor.js:15111:17)
    at applyView (http://localhost:4200/vendor.js:15118:5)
    at addViewToContainer (http://localhost:4200/vendor.js:14556:5)
    at ViewContainerRef.insert (http://localhost:4200/vendor.js:15838:21)
    at ViewContainerRef.createEmbeddedView (http://localhost:4200/vendor.js:15784:22)
    at http://localhost:4200/vendor.js:53705:50

[byelik]

at addViewToContainer (http://localhost:4200/vendor.js:14556:5)
at ViewContainerRef.insert (http://localhost:4200/vendor.js:15838:21)
at ViewContainerRef.createEmbeddedView (http://localhost:4200/vendor.js:15784:22)
at http://localhost:4200/vendor.js:53705:50

Hi. I have the same problem. Do you have some solution ?

[i1zivkovic]

at addViewToContainer (http://localhost:4200/vendor.js:14556:5)
at ViewContainerRef.insert (http://localhost:4200/vendor.js:15838:21)
at ViewContainerRef.createEmbeddedView (http://localhost:4200/vendor.js:15784:22)
at http://localhost:4200/vendor.js:53705:50

Hi. I have the same problem. Do you have some solution ?

Since I had a lot of problems with this package and I had to implement a lot of hacks, I switched to https://www.npmjs.com/package/ngx-swiper-wrapper

[byelik]

at addViewToContainer (http://localhost:4200/vendor.js:14556:5)
at ViewContainerRef.insert (http://localhost:4200/vendor.js:15838:21)
at ViewContainerRef.createEmbeddedView (http://localhost:4200/vendor.js:15784:22)
at http://localhost:4200/vendor.js:53705:50

Hi. I have the same problem. Do you have some solution ?

Since I had a lot of problems with this package and I had to implement a lot of hacks, I switched to https://www.npmjs.com/package/ngx-swiper-wrapper

thanks.

[byelik]

I used 'trackBy' and it is fixed the crash