Ion-button not working inside ion-slide



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%;">
<section class="addContainer">
	<ion-slides #slider pager (ionDrag)="onIonDrag($event)" [options]="slidesOptions">

	  <!-- Add Photo Slide -->
		<div style="padding: 10px; margin-top: 25px; text-align: center;">
			<h5><strong>Add your profile photo</strong></h5>
				<img src="images/add-profile-photo.jpg" style="width: 30%; height: 30%;"/><br/>
			<button ion-button clear (click)="getPhotoFromFB()" class="addPhotoBtns"><img src="images/upload-photo-fb.png" class="img-add-photo-btns"></button>
	  <!-- Confirm Email 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/>
				<img src="images/confirm-email.jpg" style="width: 30%; height: 30%;"/><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>
	<div style="text-align: center; margin-bottom: 10px;" (click)="goToNextPage()">
		<span style="font-size: small;">Skip for now</span>


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



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


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


I tried your code and it works for me



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…


I tested on Chrome…


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


nope, it is defined in my ts file


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