Ionic 2 Modal does not dismiss

Question

I'm trying to dismiss my modal in ionic 2.

I have component which looks like this:

export class DynamicModalComponent<T extends IHasId> {

    modalOptions: DynamicModalOptions<T>

    constructor(public navCtrl: NavController, public navParams: NavParams) {
        this.modalOptions = navParams.get('modalOptions');
    }

    close() {
        this.modalOptions.viewCtrl.dismiss();
    }
}

and my html looks like this:

<ion-header>
  <ion-navbar align-title="center">
    <ion-title> Dynamic Modal Header </ion-title>
    <ion-buttons end>
      <button (click)="close()" ion-button>
        <ion-icon name="save"></ion-icon>
        &nbsp;Cancel
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

When I click the cancel button, my function gets triggered but nothing dismisses. I don't think the issue would be in the calling class but just incase ill post the relevant pieces:

constructor(public navCtrl: NavController, public viewCtrl: ViewController, public navParams: NavParams, public baseProvider: UserSkills,
    public enumProvider: Enums, public modalCtrl: ModalController, routes: Routes) {
}

showModal(modalOptions: DynamicModalOptions<UserSkill>) {
    let modal = this.modalCtrl.create(DynamicModalComponent, { modalOptions });
    modal.present();
    return modal;
}

onItemClick(entity) {
    var modalOptions = this.getDynamicModalOptions(entity);
    this.showModal(modalOptions);
}

getDynamicModalOptions(entity: UserSkill): DynamicModalOptions<UserSkill> {
    var modalOptions = new DynamicModalOptions<UserSkill>();

    modalOptions.entity = entity;
    modalOptions.editOptions = this.editOptions;
    modalOptions.inputMetadata = this.getInputMetadata(); 
    modalOptions.viewCtrl = this.viewCtrl;

    return modalOptions;
}

Answer 1

As noted by @sebaferras, the wrong instance of ViewController is being passed here.

You can ask the injector to get the right instance of ViewController by injecting the Injector in the constructor of DynamicModalComponent. This way ViewController can be resolved in ngOnInit.

constructor(public navCtrl: NavController, 
            public navParams: NavParams, 
            private injector: Injector) {
  this.modalOptions = navParams.get('modalOptions');
}

ngOnInit() {
  this.viewCtrl = this.injector.get(ViewController);
}

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

A better technique is to inject ViewController in the constructor of DynamicModalComponent and have Angular take care of things for you.

constructor(public navCtrl: NavController, 
            public navParams: NavParams, 
            private viewCtrl ViewController) {
  this.modalOptions = navParams.get('modalOptions');
}

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