Ionic 2, how to customize component

Ionic Framework ionic-v3
1

Ionic-beta 19:

I want to modify the 'slides’ component behavior. Changing to the “swiper-widget.js” is wrong way. So, I was trying to import the component and get an instance of the widget to modify its behaviour.

I tried with :

import {slides} from 'ionic-angular';
but then don’t know how to get the instance.

Please help me with information about how to import components or extend ionic components or more broadly about how to customize a component in IONIC 2.

2

You want to modify the slider component I assume? Like for example, changing the animation of the slide?

3

I want to modify the ‘pagination bullets’. For demo, I achieved that by modifying to swiper-widget.js. But I want to do that by either, getting the instance of the component and then changing the properties, or creating a custom widget, and then instead of using …, will be using the customized directive.

4

You could always try to do this through the extraOptions of the slider component. If you control these options from within your own component, you could set it with the property paginationBulletRender.

5

Not clear. Okay can you please tell about how to get instance of the slider component into my Page class (.js file)

I have been trying various ways with fail… one of them was -

import {slides} from 'ionic-angular';
@Page({
  templateUrl: 'build/pages/page1/page1.html',
})
export class Page1 {
static get parameters() {
  return [[slides]];
}

  constructor(slides) {
      this.sSlideWidget = slides;
  }

  ngOnInit() {
    console.log(this.sSlideWidget);
  }
}
6

You can get the options object in your component by exposing it through the slider directive. If you look at the API docs over here, it shows some of the extra capabilities of the ion-slides directive.

For example, add [options]=“extraOptions” to your slides directive (in your HTML). Now there’s an object called extraOptions available in your component. Let’s say you want a different animation, for example fadeout. Your extraOptions object then could look something like this (following swiper API reference):

		this.extraOptions = {
		  speed: 800,
		  autoplay: 5000,
		  effect: 'fade',
		  fade: {
			  crossFade: true
		  },   		  
	      loop: 'true',
	      autoplayDisableOnInteraction: false
	    }

If you look at the swiper API docs over here, check for the paginationBulletRender(index, className) piece. Maybe that’s what your looking for. Good luck!

Note: although you have a lot more control over the ion-slides through this options object, not all options from the Swiper API are implemented (yet) as far as my knowledge goes. It could be that something you see in the idangerous swiper api docs isn’t ready in ionic 2 yet.

4 Likes
7

Thanks! :relaxed:… this worked for me

1 Like
8

@luukschoen Continuing on the original question, I want to add navigation buttons which arent in Ionic Slide but is there in the Swiper library. I saw the Slide component code and I need to add an html in its template. How can I do that?