Angular and ng-image-slider

Question

Does anywork work with ng-image-slider? I don't know how to handle property the imageClickFxn (@Output) inside my Component.ts file.

https://www.npmjs.com/package/ng-image-slider

Could someone with me with that? I don't have any code available, it's just an empty component. I need to handle the click behavior

Thanks

import { Component, OnInit, Input, Output } from "@angular/core";
import { Cancion } from "src/app/modelos/cancion";
import { CompartidoService } from "src/app/servicios/compartido.service";
import { CancionService } from "src/app/servicios/cancion.service";

@Component({
  selector: 'app-peliculas-carousel',
  templateUrl: './peliculas-carousel.component.html',
  styleUrls: ['./peliculas-carousel.component.css']
})
export class PeliculasCarouselComponent implements OnInit {
  images;
  title: string;
  canciones: any;
  cancionesAll: any;
  existenCanciones;

  
  @Input('imageSize') public imageSize: object;
  @Input('tipo') public tipo: string;
  @Input('genero') public genero: string;
  @Output() imageClick = this.imageClickFxn();

  constructor(
      private _servicioCompartido: CompartidoService,
      private _cancionService: CancionService
  ) {
    this.imageSize = {width: 400, height: 300, space: 4}; 
    this.existenCanciones = false;
    this._servicioCompartido.cancionesEmitida.subscribe(token => {
      this.search(token);
    });
  }

  imageClickFxn(){
    console.log('event has been fired');
  }

  ngOnInit() {
    this.images = this.cargarCanciones(this.tipo, this.genero);
  }

  cargarCanciones(tipo:string , genero:string) {
    this._cancionService.buscarCanciones(tipo, genero).subscribe(
      (response: any) => {
        if (response.canciones) {
          const videos = response.canciones;
          this.canciones =videos.map((video) => {
            return {
              title: video.titulo,
              video: 'http://youtube.com/watch?v=' + video.archivo,
            };
          });
          this.existenCanciones = true;
        }
        this.cancionesAll = this.canciones;
      },
      error => {
        if (error != null) {
          console.log(error);
        }
      }
    );
  }
  
  search(token) {
    const regex = new RegExp(token);
    this.canciones = [];
    this.cancionesAll.forEach(cancion => {
      if ((cancion.title && cancion.title.match(regex)!=null) || this.genero.match(regex) != null) {
        this.canciones.push(cancion);
      }
    });
  }

}

<div *ngIf="canciones.length > 0">
  <h3>{{genero}}</h3>
  <ng-image-slider [images]="canciones" [imageSize]="{width: 400, height: 300, space: 4}" #nav>
  </ng-image-slider>
</div>

Answer 1

Use this because imageClick is used as @output in ng-image-slide. In html:

<ng-image-slider [images]="canciones" [imageSize]="{width: 400, height: 300, space: 4}" (imageClick)="yourfunctionName($event)"  #nav>
  </ng-image-slider>

In ts:
yourfunctionName(event){
console.log(event)
}

So, when you click on your image slide. It will return index of triggered slide.