Removing a item from a carousel

[raryson]

Hello,

I'm using the carousel to create a list of items, each letter is a carousel item.

I pass an array of letters to the component and create several letters of the abcdario, when the user selects one of these letters I remove it from the string array, but in the property of the carousel they continue :(

Here the logic from component:

import { Component, OnInit, Input, ViewChild } from '@angular/core';
import {CarouselComponent} from "angular2-carousel";

@Component({
  selector: 'app-teste',
  templateUrl: './teste.component.html',
  styleUrls: ['./teste.component.css']
})

export class TesteComponent implements OnInit {

  @Input() letras : string[]
  @Input() letrasSelecionadas : string[]

  @ViewChild('carousel') carousel : CarouselComponent

  ngOnInit() {

  }

  enviarALetraSelecionada()
  {
    this.letrasSelecionadas.push(this.letras[this.carousel.carousel.activeIndex])
    this.letras.splice(this.carousel.carousel.activeIndex, 1)

    this.carousel.reInit()
    this.carousel.update()
    }

}

And rendering it in HTML:

<carousel-component #carousel>
  <div *ngFor="let letra of letras" class="item-carousel letra">
    {{letra}}
  </div>
</carousel-component>

<button (click)="enviarALetraSelecionada()">Enviar</button>
<br>
LETRAS SELECIONADAS:

<span *ngFor="let letraSelecionada of letraSelecionadas">
  {{letraSelecionadas}}
</span>

I'm grateful if you can help

[raryson]

I solved this problem removing itens from carouselElm.nativeElement and carousel.Items:

this.carousel.carouselElm.nativeElement.getElementsByClassName("item-carousel")[this.carousel.carousel.activeIndex].remove()
    this.carousel.carousel.items.splice(this.carousel.carousel.activeIndex, 1)

It would be nice to have some kind of this information on the wiki, as I realize that it took me a few hours to figure out what to remove from the list of items and the list of native items.

[kappys1]

Hi!!

Thanks for the info and solve the problem...

I don’t know why your carousel doesn’t update when you delete a element.... the last version I include the binding elements for update carousel when you add/delete any element in the array item....

More late I will try your example and I will try to solve your problem when the user update or delete elements from the array... is the best form...

Thanks for all and if you like this you can give me a star!

[kappys1]

Hi @raryson I test your code and you don't need to remove the element in dom of HTML. You can do it like that:

enviarALetraSelecionada()
{
    this.letrasSelecionadas.push(this.letras[this.carousel.carousel.activeIndex])
    this.letras.splice(this.carousel.carousel.activeIndex, 1)
    setTimeout(()=>{ this.carousel.update(); })
}

with setTimeout is possible to do the binding again.

However, In next version I will try that you don't need to use a update method and I will add a Example in wiki

Close the Issue

Thanks for all!!