# Ionic2 Modal won't show

**URL:** <https://forum.ionicframework.com/t/ionic2-modal-wont-show/66812>\
**Category:** ionic-v3\
**Created:** [October 13, 2016, 2:19pm UTC](https://forum.ionicframework.com/t/ionic2-modal-wont-show/66812 "2016-10-13T14:19:21Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![kevinvavelin](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/kevinvavelin/32/106587_2.png) [@kevinvavelin](https://forum.ionicframework.com/u/kevinvavelin)\
**Post date:** [October 13, 2016, 2:19pm UTC](https://forum.ionicframework.com/t/ionic2-modal-wont-show/66812/1 "2016-10-13T14:19:21Z")

</div>

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 😕  
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 😕

 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/e/6/e6bf8842c352bf972b95ed552590baa3286685dc.png)

Thanks in advance for your answer 🙂

---

<div class="post-metadata">

**Author:** ![alex\_key](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/alex_key/32/103500_2.png) [@alex\_key](https://forum.ionicframework.com/u/alex_key)\
**Post date:** [October 19, 2016, 12:26pm UTC](https://forum.ionicframework.com/t/ionic2-modal-wont-show/66812/3 "2016-10-19T12:26:42Z")

</div>

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