bug: angular, handleBehavior can't be use on modal creation with the ModalController

[jdupuis]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

In Ionic 6.2.0+ (Angular), it's impossible to use the handleBehavior when a modal is created with the ModalController because handleBehavior doesn't exist in type ModalOptions.

Expected Behavior

No errors on app build when the property handleBehavior is used on modal creation with the Modal Controller.

To solve that, add the property handleBehavior in the ModalOptions interface in dist/types/components/modal/modal-interface.d.ts.

Thanks !

Steps to Reproduce

1. create a blank Ionic 6 app (angular)
2. create a new component (ex : TestSheetModalComponent)
   ionic g component components/TestSheetModalComponent
3. create a new page (ex : TestSheetModalPage)
   ionic g page pages/TestSheetModalPage
4. Inject the modalController in this page and create in the ngOnInit method a new modal with the modalController injected, like this :

import {Component, OnInit} from '@angular/core';
import {ModalController} from '@ionic/angular';
import {TestSheetModalComponent} from '../../components/test-sheet-modal/ test-sheet-modal.component';

@Component({
  selector: 'app-test-sheet-modal-page',
  templateUrl: './test-sheet-modal-page.page.html',
  styleUrls: ['./test-sheet-modal-page.page.scss'],
})
export class TestSheetModalPagePage implements OnInit {

  constructor(
    private modalCtrl: ModalController
  ) {
  }

  async ngOnInit() {
    const modal = await this.modalCtrl.create({
      breakpoints: [0.25, 0.75],
      initialBreakpoint: 0.25,
      backdropBreakpoint: 0.5,
      component: TestSheetModalComponent,
      handleBehavior: 'cycle'
    });
    await modal.present();
  }

}

5. Try to serve the app :
   ionic serve
6. The build failed with the error : Object literal may only specify known properties, and 'handleBehavior' does not exist in type 'ModalOptions'.

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.20.1 (/Users/julien/.npm-packages/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 6.2.4
@angular-devkit/build-angular : 14.1.3
@angular-devkit/schematics : 14.1.2
@angular/cli : 14.1.3
@ionic/angular-toolkit : 7.0.0

Capacitor:

Capacitor CLI : 4.1.0
@capacitor/android : 4.1.0
@capacitor/core : 4.1.0
@capacitor/ios : 4.1.0

Utility:

cordova-res : 0.15.4
native-run : 1.6.0

System:

NodeJS : v14.18.2 (/usr/local/bin/node)
npm : 8.18.0
OS : macOS Monterey

Additional Information

handleBehavior property can be used with inline modals.

[liamdebeasi]

Thanks for the issue. Here is a dev build with a proposed fix if you are interested in testing:

npm install @ionic/angular@6.2.5-dev.11661433365.198ed930

[jdupuis]

Thanks for the fix @liamdebeasi, it works with the dev build ! 👍

[liamdebeasi]

Thanks for the issue. This has been resolved via #25821, and a fix will be available in an upcoming release of Ionic Framework.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.