How to detect changes on componentProps ionic 5 modal controller

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?


Typically one would implement ngOnChanges.

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[]){ = ids;
      animated: true,
      backdropDismiss: false,
      component: ModalPage,
      cssClass: 'waiting-modal',
      swipeToClose: false
    }).then(res => {

and the modal page is

@Input() data = [];

and the html is

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

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

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

  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) {
        .subscribe(count => this.count = count);
export class AppComponent {
  counter = interval(1000);

  constructor(private modaler: ModalController) {

  popDialog(): void {
      component: AlertComponent,
      componentProps: {
        counter: this.counter,
    }).then(dlog => dlog.present());
   <ion-button (click)="popDialog()">pop dialog</ion-button>

Wow thank you it’s working! :slight_smile: