Use ionic directive ion-slides and ion-slide accross different custom component

Ionic Framework ionic-v3
13

I made some progress modifying the ionic slides code to allow custom ion-slide wrappers, but it wasn’t going to worth compared to just writing your own Slide component directly.

I wrote a lengthy SO answer here. I think the best solution is to write your component to replace ion-slide rather than to wrap it. The typescript version of your custom task would be

import { Slides } from 'ionic-angular';

@Component({
  selector: 'task',
  template: '<div class="slide-zoom"><ng-content></ng-content></div>',
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
})
export class Task {
  @Input() zoom: any;
  
  constructor(elementRef: ElementRef, @Host() public slides: Slides) {
    elementRef.nativeElement.classList.add('swiper-slide');
    slides.rapidUpdate();
  }

  ngOnDestroy() {
    this.slides.rapidUpdate();
  } 
}

I included a possible better solution in my linked answer that uses a decorator for extending a component. Your task using this CustomComponent decorator this would be:

import { Slides } from 'ionic-angular';

@CustomComponent({
  selector: 'task',
  template: '<div class="slide-zoom"><ng-content></ng-content></div>',
})
export class Task extends Slide {
}