Modal not closing (dismiss)

Ionic Framework ionic-v3
1

Updated to version:

Cordova CLI :6.2.0
Ionic framework version : 2.0.0-beta.7
Ionic CLI version : 2.0.0-beta.29
Ionic App Lib Version:2.0.0-beta.16
OS: Node Version:v4.4.6

Modal not closing, the method is not called

Ex : this.view.dismiss(); (is not working)

2

I’ve used this on both beta.7 and beta.8 and it seems to be working, post your code up here so we can see. Are you importing the ViewController and setting up a reference to it for this.view?

3

hi, follows the code:

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

@Component({
  templateUrl: 'build/pages/modal-contas/modal-contas.html',
})
export class ModalContasPage {
  static get parameters() {
    return [[NavController]],[[ViewController]],[[NavParams]];
  }

  constructor(nav,view,params) {
    this.nav = nav;
    this.view = view;
    this.conta = {descricao: ""};
  }
  cancel(){
    this.view.dismiss();
  }
  salvarS(){
    this.view.dismiss(this.conta);
  }
}

<ion-navbar primary>
  <ion-buttons start>
      <button (click)="cancel()"><ion-icon name="close"></ion-icon></button>
  </ion-buttons>
  <ion-title>Conta</ion-title>
</ion-navbar>

<ion-content padding class="modal-contas">
  <ion-list>
      <ion-item>
        <ion-label stacked>Descrição</ion-label>
        <ion-input type="text" [(ngModel)]="conta.descricao"></ion-input>
      </ion-item>
    </ion-list>
    <button block light (click)="salvar()">Salvar</button>
</ion-content>
```
tks,for your help !
4

And are you calling cancel() correctly from your template? Also, you can surround your code with three backticks ` at the top and bottom to format your code.

5

follows

<ion-navbar primary>
  <ion-buttons start>
      <button (click)="cancel()"><ion-icon name="close"></ion-icon></button>
  </ion-buttons>
  <ion-title>Conta</ion-title>
</ion-navbar>

<ion-content padding class="modal-contas">
  <ion-list>
      <ion-item>
        <ion-label stacked>Descrição</ion-label>
        <ion-input type="text" [(ngModel)]="conta.descricao"></ion-input>
      </ion-item>
    </ion-list>
    <button block light (click)="salvar()">Salvar</button>
</ion-content>

```

tks for the tip !
6

Looks like you’ve got a syntax issue here:

return [[NavController]],[[ViewController]],[[NavParams]];

should be:

return [[NavController],[ViewController],[NavParams]];
7

It has been fixed, but modal does not close .

8

How you are open the modal? Could you post the code?

9

Hi Muricio, follows the code:

import {Component} from '@angular/core';
import {NavController,Modal} from 'ionic-angular';
import {DAOContas} from '../../dao/dao-contas';
import {ModalContasPage} from '../modal-contas/modal-contas';

@Component({
  templateUrl: 'build/pages/contas/contas.html',
})
export class ContasPage {
  static get parameters() {
    return [[NavController]];
  }

  constructor(nav) {
    this.nav = nav;
    this.dao = new DAOContas();
    this.listContas=this.dao.getlist();
  }
  insert(){
      let modal = Modal.create(ModalContasPage);
      modal.onDismiss((data)=>{
        this.dao.insert(data);
      });
      this.nav.present(modal);
  }

}
```

```html
<ion-navbar *navbar>
  <ion-title>contas</ion-title>
  <button menuToggle>
      <ion-icon name="menu"></ion-icon>
  </button>
</ion-navbar>

<ion-content>
  <ion-list>
      <ion-item *ngFor="#item of listContas">
          {{item.descricao}}
      </ion-item>
  </ion-list>
  <button fab fab-bottom fab-right danger (click)="insert()"><ion-icon name="add"></ion-icon></button>
</ion-content>
```
10

Humm… Strange…

I do the same like you. Any error appear in console?

11

Hi Mauricio, follows console:

zone.js:260 Uncaught EXCEPTION: Error in build/pages/modal-contas/modal-contas.html:3:14
ORIGINAL EXCEPTION: TypeError: Cannot read property 'dismiss' of undefined
ORIGINAL STACKTRACE:
TypeError: Cannot read property 'dismiss' of undefined
    at ModalContasPage.cancel (http://localhost:8100/build/js/app.bundle.js:216:16)
    at DebugAppView._View_ModalContasPage0._handle_click_5_0 (ModalContasPage.template.js:397:28)
    at http://localhost:8100/build/js/app.bundle.js:26051:24
    at http://localhost:8100/build/js/app.bundle.js:34998:36
    at http://localhost:8100/build/js/app.bundle.js:35068:93
    at ZoneDelegate.invoke (http://localhost:8100/build/js/zone.js:323:29)
    at Object.onInvoke (http://localhost:8100/build/js/app.bundle.js:30629:41)
    at ZoneDelegate.invoke (http://localhost:8100/build/js/zone.js:322:35)
    at Zone.runGuarded (http://localhost:8100/build/js/zone.js:230:48)
    at NgZoneImpl.runInnerGuarded (http://localhost:8100/build/js/app.bundle.js:30662:78)
ERROR CONTEXT:
[object Object]
12

@Fabio_RM IMHO there’s a problem with the DI and the ViewController is not injected properly.

I would recommend you to check your other pages for errors like this one:

And also consider using an IDE/editor that performs some kind of code checking.

13

tks, now it’s ok !
return [[NavController],[ViewController],[NavParams]];

14

@Fabio_RM You can use this.navCtrl.pop() to close the modal.