mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-15 09:34:19 +08:00

Issue number: Internal --------- <!-- Please refer to our contributing documentation for any questions on submitting a pull request, or let us know here if you need any help: https://ionicframework.com/docs/building/contributing --> <!-- Some docs updates need to be made in the `ionic-docs` repo, in a separate PR. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation for details. --> <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> The counter for incrementing the `id` and `z-index` of an overlay is incremented whenever the `connectedCallback` is fired for an overlay. When an overlay is presented and/or conditionally rendered, the overlay `id` can increment by `n+2` instead of `n+1`. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Increments all overlay ids consistently - Removes legacy `ion-modal-{id}` and `ion-popover-{id}` logic - Adds unit tests for the id behavior - Tests are split up into separate files so that the counter is always starting from `0` - Adds an integration test with the Angular test app to verify conditional rendering behavior ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. -->
@ionic/angular
Ionic Angular specific building blocks on top of @ionic/core components.
Related
- Ionic Core Components
- Ionic Documentation
- Ionic Forum
- Ionicons
- Stencil
- Stencil Worldwide Slack
- Capacitor
License
Testing ng-add in ionic
- Pull the latest from
main
- Build ionic/angular:
npm run build
- Run
npm link
fromionic/angular/dist
directory - Create a blank angular project
ng new add-test
// Say yes to including the router, we need it
cd add-test
- To run schematics locally, we need the schematics-cli (once published, this will not be needed)
npm install @angular-devkit/schematics-cli
- Link
@ionic/angular
npm link @ionic/angular
- Run the local copy of the ng-add schematic
$ npx schematics @ionic/angular:ng-add
You'll now be able to add ionic components to a vanilla Angular app setup.