Ionic modal change detection

Question

I have a component using an Ionic modal to modify the album variable.

 addMedias() {
    let self = this;
    let profileModal = self.modalCtrl.create(AlbumAddPage, { album: self.album });
    profileModal.onDidDismiss(data => {
      self.zone.run(() => {
        console.log("ALBUM " + data.album)
        self.album = data.album;
      })
    });
    profileModal.present();
  }

I tried to force change detection with ChangeRefDetector markForCheck() and detectChanges(), then I tried to use angular Zones, but when onDidDismiss() is called, the view of this component does not update. Any thoughts ?

EDIT : here is the modal code :

@Component({
  selector: 'page-album-add',
  templateUrl: 'album-add.html'
})
export class AlbumAddPage {
  album: any;

  constructor(
    private navParams: NavParams,
    public navCtrl: NavController,
    private viewCtrl: ViewController,

  ) {
        this.album = navParams.data.album;

  }   

  addMedias(asset){

        this.album.assets.push(asset);
        this.viewCtrl.dismiss({album:this.album});

    }

}

yes, the model is successfully changed in the base component, but ngOnChanges is not triggered — Alexandre Rozier, Dec 02 '16 at 10:11
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/129614/discussion-between-suraj-rao-and-alexandre-rozier). — Suraj Rao, Dec 02 '16 at 10:34

score 1 · Accepted Answer · edited May 23 '17 at 12:02

Ok, i found the trick !

When the album value change in the parent, angular does not detect it as "changed" : since I work in the modals with the same album instance, the parent sees no changes with the album passed back by the modal.

I had to create a new instance of album and pass it to my modal to make it work (see here the link that put me in the right direction) :

        let self = this;
        let album = this.album; // Copies the album
        this.album = []; // Changes the album 
        let editionModal = self.modalCtrl.create(AlbumEditionPage, {
            album: album
        });
        editionModal.onDidDismiss(data => {
            setTimeout(function () {
                console.log("new album data from edition : ")
                self.album = data.album
                console.log(data.album);
                console.log(self.album);
            }, 0)

        });

Ionic modal change detection

1 Answers1