Inactive button on modal


#1

Hello, i’ve got some trouble with inactive button on modal Page.

my project was created from “tabs” projects.
on my home Page, I’ve a button that open a modal Page.

import { Component } from '@angular/core';
import { NavController, Platform, ModalController } from 'ionic-angular';
import { LoginPage } from '../login/login';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor(public navCtrl: NavController, public platform: Platform, private geolocation: Geolocation, public adressService: TruckFoodAdress, public modalCtrl: ModalController) {
...
login():void{
    console.log('open modal LoginPage');
    let modal = this.modalCtrl.create(LoginPage);
    modal.present();
  };
...
}

Here is HTML

<ion-header>
  <ion-navbar>
    <ion-title>
MyApp
    </ion-title>
    <ion-buttons end>
    <button ion-button icon-only (click)="login()"><ion-icon name="log-in"></ion-icon></button>
  </ion-buttons>
  </ion-navbar>
</ion-header>
 
<ion-content padding>
...
</ion-content>

Nothing really special ^^

Here his my modal Page :

import { Component } from '@angular/core';
import { ViewController, NavParams } from 'ionic-angular';
import { Facebook, FacebookLoginResponse } from '@ionic-native/facebook';

@Component({
  selector: 'page-login',
  templateUrl: 'login.html'
})
export class LoginPage {

  constructor(public viewCtrl: ViewController, public navParams: NavParams, private fb: Facebook) { }

  ionViewDidLoad() {
  }

  connect(): void {
    this.fb.login(['public_profile', 'user_friends', 'email'])
      .then((res: FacebookLoginResponse) => console.log('Logged into Facebook!', res))
      .catch(e => console.log('Error logging into Facebook', e));
  }

  close(): void {
    this.viewCtrl.dismiss();
  }

  save(): void {
    this.close();
  }
}

And the HTML from login page look like this

<ion-header>
 <ion-toolbar transparent>
  <ion-title>Login</ion-title>
  <ion-buttons end>
    <button ion-button icon-only (click)="close()"><ion-icon name="close"></ion-icon></button>
  </ion-buttons>
 </ion-toolbar>
</ion-header>
 
<ion-content>
 <button ion-button full color="warning" (click)="connect()">FaceBook</button>
 <button ion-button full color="secondary" (click)="save()">Save</button>
</ion-content>

My problem is :
On the modal Page, only the button on the “ion-toolbar” work, the ohter won’t work … no log message ( when added )

I’ve another modal on another page, no problem … only when the modal is open from the home Page …
Any ideas ?
thanks in advance