javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-15 09:34:19 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
ionic-framework/packages/angular
History
Brandy Smith b154f4ed09 feat(reorder-group): add ionReorderStart, ionReorderMove, ionReorderEnd events (#30471) 
Issue number: resolves #23148 resolves #27614

---------

The `ion-reorder-group` only emits an `ionItemReorder` event when the reorder gesture ends AND the item position has changed. There is no way to listen for when the gesture starts, is actively moving, or ends without the item changing position.

- Adds an `ionReorderStart` event that is fired without any details on the start of the gesture.
- Adds an `ionReorderMove` event that is fired continuously during gesture move and includes the `from` and `to` detail.
- Adds an `ionReorderEnd` event that is fired at the end of the gesture and always includes the `from` and `to` detail, even if they are the same.
- Deprecates the `ionItemReorder` event, recommending to use the `ionReorderEnd` instead.

- [ ] Yes
- [x] No

While this does not introduce a breaking change, it does deprecate the `ionItemReorder` event in favor of the `ionReorderEnd` event. This event behaves a bit differently since it is always emitted on end. If the `from` and `to` are the same, it will still emit them, so it's possible to check if they are the same to determine if `ionReorderEnd` fired without moving item positions.

----

Co-authored-by: sfinktah <sfinktah@github.spamtrak.org>
Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
2025-07-30 16:42:53 -04:00
..
common
feat(radio-group): add helperText and errorText properties (#30222)
2025-03-10 19:07:22 -04:00
scripts
chore: remove old link scripts (#28886)
2024-01-25 20:15:28 +00:00
src
feat(reorder-group): add ionReorderStart, ionReorderMove, ionReorderEnd events (#30471)
2025-07-30 16:42:53 -04:00
standalone
feat(reorder-group): add ionReorderStart, ionReorderMove, ionReorderEnd events (#30471)
2025-07-30 16:42:53 -04:00
test
chore(angular): upgrade test apps to latest (#30517)
2025-06-30 20:10:51 +00:00
.eslintignore
refactor(angular): move to packages directory (#27719)
2023-07-05 17:52:35 +00:00
.eslintrc.json
refactor(angular): move to packages directory (#27719)
2023-07-05 17:52:35 +00:00
.prettierignore
fix(angular): standalone form components do not error when multiple are used (#28423)
2023-10-27 19:08:54 +00:00
CHANGELOG.md
v8.6.7
2025-07-30 20:14:30 +00:00
ng-package.json
refactor(angular): move to packages directory (#27719)
2023-07-05 17:52:35 +00:00
package-lock.json
chore(): update package lock files
2025-07-30 20:15:16 +00:00
package.json
v8.6.7
2025-07-30 20:14:30 +00:00
README.md
fix(angular): update schematics to support Angular's latest build system (#30525)
2025-07-02 15:23:43 +00:00
tsconfig.json
chore(angular): type checking for standalone directory (#28531)
2023-11-15 18:58:27 +00:00
tsconfig.schematics.json
refactor(angular): move to packages directory (#27719)
2023-07-05 17:52:35 +00:00

README.md

@ionic/angular

Ionic Angular specific building blocks on top of @ionic/core components.

Related

License

Testing Local Ionic Framework with ng add

This guide shows you how to test the local Ionic Framework build with a new Angular application using ng add. This is useful for development and testing changes before publishing.

Prerequisites

  • Node.js and npm installed
  • Angular CLI installed globally (npm install -g @angular/cli)

Build Local Ionic Framework

  1. Clone the repository (if not already done):

    git clone https://github.com/ionic-team/ionic-framework.git
cd ionic-framework

  2. Pull the latest from main

    git pull origin main

  3. Install dependencies and build the core package:

    cd core
npm install
npm run build

  4. Install dependencies, sync the core build and build the Angular package:

    cd ../packages/angular
npm install
npm run sync
npm run build

  5. Create a tarball:

    cd dist
npm pack

  6. Copy the tarball to Downloads:

    cp ionic-angular-*.tgz ~/Downloads/ionic-angular.tgz

Test with New Angular App

  1. Create a new Angular app:

    # Change to whichever directory you want the app in
cd ~/Documents/
ng new my-app --style=css --ssr=false --zoneless=false
cd my-app

  2. Install the local @ionic/angular package:

    npm install ~/Downloads/ionic-angular.tgz

  3. Run ng add:

    ng add @ionic/angular --skip-confirmation

  4. Serve the app:

    ng serve

The local Ionic Framework build is now active in the Angular app. Changes to the Ionic source code require rebuilding the packages and reinstalling the tarball to see updates.

Project Structure

common

This is where logic that is shared between lazy loaded and standalone components live. For example, the lazy loaded IonPopover and standalone IonPopover components extend from a base IonPopover implementation that exists in this directory.

Note: This directory exposes internal APIs and is only accessed in the standalone and src submodules. Ionic developers should never import directly from @ionic/angular/common. Instead, they should import from @ionic/angular or @ionic/angular/standalone.

standalone

This is where the standalone component implementations live. It was added as a separate entry point to avoid any lazy loaded logic from accidentally being pulled in to the final build. Having a separate directory allows the lazy loaded implementation to remain accessible from @ionic/angular for backwards compatibility.

Ionic developers can access this by importing from @ionic/angular/standalone.

src

This is where the lazy loaded component implementations live.

Ionic developers can access this by importing from @ionic/angular.