How to detect changes on componentProps ionic 5 modal controller

Ionic Framework
1

Hi,
I have page that opens a modal by using modal controller ionic 5.
The modal gets an array of strings as component props and in the modal component I have the @Input() data;

How can I detect changes on this input when it’s change in the page component?

Thanks

2

Typically one would implement ngOnChanges.

3

Thanks for the response I tried but with no success :frowning:

I think onChanges works only if pass the input in the html as an attribute and not as componentProps for the modal

in page I have

const data = [];
handleData(ids: string[]){
this.data = ids;
}
  this.modalController.create({
      animated: true,
      backdropDismiss: false,
      component: ModalPage,
      cssClass: 'waiting-modal',
      componentProps:{
        data: this.data
      },
      swipeToClose: false
    }).then(res => {
      res.present();
    });

and the modal page is

@Input() data = [];

and the html is

<ion-item *ngFor="let d of data">
    {{d}}
  </ion-item>

when handleData is being called I do not see the changes in the modal

4

Ah, I see what you are saying. You can pass Observables through componentProps like this:

@UntilDestroy()
@Component({
  selector: "app-alert",
  template: "<p>{{count}} ah ah ah</p>"
})
export class AlertComponent implements AfterContentInit {
  count = 0;
  @Input() counter: Observable<number>;

  ngAfterContentInit() {
    if (this.counter) {
      this.counter.pipe(untilDestroyed(this))
        .subscribe(count => this.count = count);
    }
  }
}

export class AppComponent {
  counter = interval(1000);

  constructor(private modaler: ModalController) {
  }

  popDialog(): void {
    this.modaler.create({
      component: AlertComponent,
      componentProps: {
        counter: this.counter,
      }
    }).then(dlog => dlog.present());
  }
}

<ion-content>
   <ion-button (click)="popDialog()">pop dialog</ion-button>
</ion-content>
5

Wow thank you it’s working! :slight_smile: