Ion-button not working inside ion-slide

Ionic Framework ionic-v3
1

Hi,

I’m having an issue when using ion-slides… I have an ion-button defined on my ion-slide which calls a method when clicked. However, it doesn’t call the method. Any ideas? Your help is very much appreciated. Thanks :slight_smile:

Here is my code inside ion-content.

<!-- filler div -->
<div style="height:15%;">
</div>
<section class="addContainer">
	<ion-slides #slider pager (ionDrag)="onIonDrag($event)" [options]="slidesOptions">

	  <!-- Add Photo Slide -->
	  <ion-slide>
		<div style="padding: 10px; margin-top: 25px; text-align: center;">
			<h5><strong>Add your profile photo</strong></h5>
			<div>
				<img src="images/add-profile-photo.jpg" style="width: 30%; height: 30%;"/><br/>
			</div>
			<button ion-button clear (click)="getPhotoFromFB()" class="addPhotoBtns"><img src="images/upload-photo-fb.png" class="img-add-photo-btns"></button>
		</div>
		<br/>		
	  </ion-slide>
	  
	  
	  <!-- Confirm Email Slide -->
	  <ion-slide>
		<div style="margin-top: 25px;">
			<h5><strong>Confirm your email</strong></h5>
			<span style="font-size: small;">We'll send an email to the address below</span><br>
			<span style="font-size: small;">Tap the link in the email to confirm it's you</span><br/><br/>
			<div>
				<img src="images/confirm-email.jpg" style="width: 30%; height: 30%;"/><br/>
			</div>
		</div>
		<br/>
		<form class="list" [formGroup]="verifyEmailForm" (ngSubmit)="verify()" novalidate>
			<ion-input type="text" formControlName="email" placeholder="Email" ></ion-input>
			<button ion-button clear type="submit" class="addPhotoBtns"><img src="{{ button_send_confirmation_email }}" class="img-add-photo-btns"></button>
			<br/>
		</form>
	  </ion-slide>
	</ion-slides>
	<br/>
	
	<div style="text-align: center; margin-bottom: 10px;" (click)="goToNextPage()">
		<span style="font-size: small;">Skip for now</span>
	</div>
		
		
</section>
2

try to move around your (click) - it can be applied to almost any element in Angular2

1 Like
3

Hi,

I’ve already did that, no logs being shown in console.

4

shouldnt the ion-slides be under ion-content ??

5

I tried your code and it works for me

6

Hi,

Yes they are, the markup had cut the tags… That’s strange, on what browser did you test? I’ve tested both on Chrome and FF…

7

I tested on Chrome…

8

Are you referring to this function ?

TypeError: self.context.getPhotoFromFB is not a function

it clicked and errored out on me…as I dont have it…but it verifies that it is working

9

nope, it is defined in my ts file

10

This issue was fixed now. It was actually the ion-slider pager bullets overlapping with the whole screen. Setting its height to smaller (e.g 10px) fixed the problem. Thanks