Custom ion-slide component

Ionic Framework ionic-v3
1

I’d like to use a customized ion-slide component, but I’m getting the template parse errors: No provider for Slides error.

Here’s the component:

import { Component } from '@angular/core';
    
@Component({
  selector: 'myslide',
  templateUrl: 'myslide.html'
})
export class MySlide {
  constructor() {}
}

and it’s template:

<ion-slide>
  <h1>My Placeholder Title</h1>
  <ng-content></ng-content>
</ion-slide>

The way I’d like to use it in another page is:

<ion-slides>
    <myslide> Slide 1 </myslide>
    <myslide> Slide 2 </myslide>
</ion-slides>

I tried adding providers: [Slides] to the component definition, the error is exactly the same.

I guess some others have had the same issue, but this example is very simple and ionic 2 is getting closer to release. Can anyone help me sort out this issue?

2

Based on the implementation of ionic slides, I think the best solution is to write a custom component to replace the Slide rather than to wrap it. Obviously this has the downside that if the ionic slides implementation changes, you may have to update your custom slide components.

For the example in my post, the replacement component looks like this:

@Component({
  selector: 'myslide',
  templateUrl: 'myslide.html'
})
export class MySlide {
    @Input() zoom: any;

  constructor(elementRef: ElementRef, @Host() public slides: Slides) {
    elementRef.nativeElement.classList.add('swiper-slide');
    slides.rapidUpdate();
  }

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

with

<div class="slide-zoom">
  <h1>My Placeholder Title </h1>
  <ng-content></ng-content>
</div>

You can find more details (and a possible improvement) here and here.