Ionic2 Modal won't show


#1

Hi there,

I have a problem with my Modal, where it not shown but only pop the path of the templateUrl, I don’t know why I have this “bug”, everything seems to works properly, the content behind is have no longer interaction :confused:
Can someone help me with it ? Here is the code I use for my modal :

    <ion-header>
	<ion-toolbar>
		<ion-title>
			Description
		</ion-title>
		<ion-buttons start>
			<button ion-button (click)="dismiss()">
        <span color="primary" showWhen="ios">Cancel</span>
        <ion-icon name="md-close" showWhen="android,windows"></ion-icon>
      </button>
		</ion-buttons>
	</ion-toolbar>
</ion-header>

<ion-content>
	<ion-card>
		<ion-card-header>
			Rendez-vous exemple
		</ion-card-header>
		<ion-card-content>
			Lorem ipsum
		</ion-card-content>
	</ion-card>
</ion-content> 

The code of my controller :

import { Component } from '@angular/core';
import { ViewController } from 'ionic-angular';

@Component({
  template: 'createDate.component.html'
})

export class CreateDateComponent {
  
  constructor(public viewController: ViewController) {}

  dismiss() {
this.viewController.dismiss();
  }

}

And my NavController who is in charge to show the modal :

import { Component } from '@angular/core';
import { Geolocation } from 'ionic-native';
import { NavController, ToastController, ModalController } from 'ionic-angular';
import { CreateDateComponent } from '../createDate/createDate.component';

@Component({
  selector: 'dating',
  templateUrl: 'dating.component.html'
})

export class DatingComponent {

  constructor(public navCtrl: NavController, public toastController: ToastController, public modalController: ModalController) {

    Geolocation.getCurrentPosition().then((response) => {
      console.log(response.coords.latitude);
      console.log(response.coords.longitude);
    }).catch((error) => {
      this.presentGeolocationError();
    });

    let watch = Geolocation.watchPosition();
    watch.subscribe((data) => {
      console.log(data);
    });
  }

  presentGeolocationError() {
    let toastGeolocationError = this.toastController.create({
      message: "Impossible de récupérer votre position",
      duration: 3000
    });
    toastGeolocationError.present();
  }

  presentCreateDateModal() {
    let createDateModal = this.modalController.create(CreateDateComponent);
    createDateModal.present();
  }

}

Here you can see that only the url path is shown but nothing else :confused:

Thanks in advance for your answer :slight_smile:


#3

Oh! Totally missed it. In your @Component decorator declaration, change template: to templateUrl: