Event Emitter type is wrong

[ghost]

Check that this is really a bug

• I confirm

Reproduction link

(Angular templates are not type-safe in codesandbox)

Bug description

The core package has a SwiperEvents interface that defines callback functions for all possible events. The callback functions receive the Swiper reference as argument (and additional arguments in some cases).

// Swiper Events (Core)
slideChange: (swiper: Swiper) => void;

The Angular Swiper Component events are event emitters that use the SwiperEvents interface for the generic type.

// Swiper Component (Angular)
s_slideChange: EventEmitter<SwiperEvents['slideChange']>;

The event emitter type is wrong. The event emitter replaces the callback function.
The current type results in an event emitter that emits a callback function instead of emitting the swiper reference directly.

Expected Behavior

The events should receive the swiper reference:

<!-- ./demo.component.html -->
<swiper (slideChange)="demo($event)"></swiper>

// ./demo.component.ts
export class DemoComponent {
  demo(swiper: Swiper) {}
}

Actual Behavior

The expected behavior works when running in the browser - we receive the swiper reference - but there is a TypeScript error because the type of the event emitter is wrong. With the current type our event handler method would receive a callback function that expects the swiper ref instead.

<!-- ./demo.component.html -->
<swiper (slideChange)="demo($event)"></swiper

// ./demo.component.ts
export class DemoComponent {
  demo(callback: (swiper: Swiper) => void) {
    // No TS error anymore
    // But a callback function would not make sense
    // and we actually receive the swiper reference directly and not a callback function
  }
}

Current workaround is to use $any in the template:

<!-- ./demo.component.html -->
<swiper (slideChange)="demo($any($event))"></swiper

// ./demo.component.ts
export class DemoComponent {
  demo(swiper: Swiper) {}
}

Swiper version

7.0.5

Platform/Target and Browser Versions

macOS 11.5.2 / Brave 1.30.86 / TypeScript 4.3.5 / Angular 12.1.5

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• I'm willing to open a PR

[vltansky]

Hey, thanks for reporting this, and sorry for the delay.
It was actually a huge bug and will need a major release :)

New API will be:

<swiper (beforeTransitionStart)="testEvent($event)"></swiper>

testEvent(event: Parameters<SwiperEvents['beforeTransitionStart']>) {
  const [swiper, speed, internal] = event;
  console.log({ swiper, speed, internal });
}

[vltansky]

released in v8