refactor: remove NavParams

BREAKING.md

@@ -22,6 +22,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
   - [Datetime](#version-8x-datetime)
   - [Nav](#version-8x-nav)
   - [Picker](#version-8x-picker)
+- [Angular](#version-8x-angular)
 
 <h2 id="version-8x-browser-platform-support">Browser and Platform Support</h2>
 
@@ -143,3 +144,80 @@ This allows components to inherit the color properly when used outside of Ionic
 - `ion-picker` and `ion-picker-column` have been renamed to `ion-picker-legacy` and `ion-picker-legacy-column`, respectively. This change was made to accommodate the new inline picker component while allowing developers to continue to use the legacy picker during this migration period.
   - Only the component names have been changed. Usages such as `ion-picker` or `IonPicker` should be changed to `ion-picker-legacy` and `IonPickerLegacy`, respectively.
   - Non-component usages such as `pickerController` or `useIonPicker` remain unchanged. The new picker displays inline with your page content and does not have equivalents for these non-component usages.
+
+<h4 id="version-8x-angular">Angular</h4>
+
+- NavParams has been removed in favor of using Angular's Input API. Components that accessed parameters should ensure that an input is created for each parameter:
+
+**Old**
+```js
+import { NavParams } from '@ionic/angular';
+
+console.log(this.navParams.get('myProp'));
+```
+
+**New**
+```js
+import { Input } from '@angular/core';
+
+...
+
+@Input() myProp: string;
+
+ngOnInit() {
+  console.log(this.myProp)
+}
+```
+
+Developers who were using `NavParams` as a pass through to an encapsulated IonNav component can use a single `Input` to achieve the same behavior.
+
+**Old**
+```js
+// home.page.ts
+const modal = await modalCtrl.create({
+  component: NavComponent,
+  componentProps: {
+    foo: 'hello',
+    bar: 'goodbye'
+  }
+});
+```
+
+```js
+// nav.component.ts
+public rootParams = {};
+
+constructor(private navParams: NavParams) {
+  this.rootParams = {
+    ...navParams.data
+  }
+}
+```
+```html
+<!-- nav.component.html -->
+<ion-nav [rootParams]="rootParams"></ion-nav>
+```
+
+**New**
+
+```js
+// home.page.ts
+const modal = await modalCtrl.create({
+  component: NavComponent,
+  componentProps: {
+    rootParams: {
+      foo: 'hello',
+      bar: 'goodbye'
+    }
+  }
+});
+```
+
+```js
+// nav.component.ts
+@Input() rootParams = {};
+```
+```html
+<!-- nav.component.html -->
+<ion-nav [rootParams]="rootParams"></ion-nav>
+```

packages/angular/common/src/index.ts

@@ -10,8 +10,6 @@ export { bindLifecycleEvents, AngularDelegate } from './providers/angular-delega
 export type { IonicWindow } from './types/interfaces';
 export type { ViewWillEnter, ViewWillLeave, ViewDidEnter, ViewDidLeave } from './types/ionic-lifecycle-hooks';
 
-export { NavParams } from './directives/navigation/nav-params';
-
 export { IonPopover } from './overlays/popover';
 export { IonModal } from './overlays/modal';
 

packages/angular/common/src/providers/angular-delegate.ts

@@ -6,7 +6,6 @@ import {
   EnvironmentInjector,
   inject,
   createComponent,
-  InjectionToken,
   ComponentRef,
 } from '@angular/core';
 import {
@@ -18,8 +17,6 @@ import {
   LIFECYCLE_WILL_UNLOAD,
 } from '@ionic/core/components';
 
-import { NavParams } from '../directives/navigation/nav-params';
-
 // TODO(FW-2827): types
 
 @Injectable()
@@ -123,26 +120,9 @@ export const attachView = (
   cssClasses: string[] | undefined,
   elementReferenceKey: string | undefined
 ): any => {
-  /**
-   * Wraps the injector with a custom injector that
-   * provides NavParams to the component.
-   *
-   * NavParams is a legacy feature from Ionic v3 that allows
-   * Angular developers to provide data to a component
-   * and access it by providing NavParams as a dependency
-   * in the constructor.
-   *
-   * The modern approach is to access the data directly
-   * from the component's class instance.
-   */
-  const childInjector = Injector.create({
-    providers: getProviders(params),
-    parent: injector,
-  });
-
   const componentRef = createComponent<any>(component, {
     environmentInjector,
-    elementInjector: childInjector,
+    elementInjector: injector,
   });
 
   const instance = componentRef.instance;
@@ -230,23 +210,3 @@ export const bindLifecycleEvents = (zone: NgZone, instance: any, element: HTMLEl
     return () => unregisters.forEach((fn) => fn());
   });
 };
-
-const NavParamsToken = new InjectionToken<any>('NavParamsToken');
-
-const getProviders = (params: { [key: string]: any }) => {
-  return [
-    {
-      provide: NavParamsToken,
-      useValue: params,
-    },
-    {
-      provide: NavParams,
-      useFactory: provideNavParamsInjectable,
-      deps: [NavParamsToken],
-    },
-  ];
-};
-
-const provideNavParamsInjectable = (params: { [key: string]: any }) => {
-  return new NavParams(params);
-};

packages/angular/src/index.ts

@@ -24,7 +24,6 @@ export {
   Config,
   Platform,
   AngularDelegate,
-  NavParams,
   IonicRouteStrategy,
   ViewWillEnter,
   ViewWillLeave,

packages/angular/standalone/src/index.ts

@@ -20,7 +20,6 @@ export {
   NavController,
   Config,
   Platform,
-  NavParams,
   IonicRouteStrategy,
   ViewWillEnter,
   ViewDidEnter,