feat(angular): support binding routing data to component inputs (#27694)

Issue number: Resolves #27476

---------

<!-- 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. -->

Ionic Angular application on Angular v16 cannot use the
[`bindToComponentInputs`](https://angular.io/api/router/ExtraOptions#bindToComponentInputs)
feature to assign route parameters, query parameters, route data and
route resolve data to component inputs.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Ionic Angular developers can use the option on `RouterModule.forRoot`
to enable the Angular feature for binding the route snapshot data to the
component inputs.

**Modules**
```ts
@NgModule({
  imports: [
    RouterModule.forRoot([/* your routes */], { 
      bindToComponentInputs: true // <-- enable this feature
    })
  ]
})
export class AppModule { }
```

**Standalone**

```ts
import { withComponentInputBinding } from '@angular/router';

bootstrapApplication(App, {
  providers: [
    provideRouter(routes, 
      //... other features
      withComponentInputBinding() // <-- enable this feature
    )
  ],
});
```

With this feature enabled, developers can bind route parameters, query
parameters, route data and the returned value from a resolver to input
bindings on their component.

For example, with a route configuration of:
```ts
RouterModule.forChild([
  {
    path: ':id',
    data: {
      title: 'Hello world'
    },
    resolve: {
      name: () => 'Resolved name'
    },
    loadComponent: () => import('./example-component/example.component').then(c => c.ExampleComponent)
  }
])
```
and a component configuration of:

```ts
@Component({ }) 
export class ExampleComponent {
  @Input() id?: string;
  @Input() title?: string;
  @Input() name?: string;
  @Input() query?: string;
}
```

Navigating to the component with a url of: `/2?query=searchphrase`

The following would occur:
- `id` would return `2`
- `title` would return `Hello world`
- `name` would return `Resolved name`
- `query` would return `searchphrase`

## 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. -->

This PR will need to be targeted to a minor release once a design doc is
approved by the team.

Dev-build: `7.1.3-dev.11689276547.129acb40`

packages/angular/test/apps/ng16/e2e/src/bind-component-inputs.spec.ts

@@ -0,0 +1,8 @@
+it("binding route data to inputs should work", () => {
+  cy.visit('/version-test/bind-route/test?query=test');
+
+  cy.get('#route-params').contains('test');
+  cy.get('#query-params').contains('test');
+  cy.get('#data').contains('data:bindToComponentInputs');
+  cy.get('#resolve').contains('resolve:bindToComponentInputs');
+});

packages/angular/test/apps/ng16/src/app/app-routing.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { routes } from './app.routes';
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes, { bindToComponentInputs: true })],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

packages/angular/test/apps/ng16/src/app/version-test/bind-component-inputs/bind-component-inputs.component.ts

@@ -0,0 +1,41 @@
+import { Component, Input, OnInit } from "@angular/core";
+import { IonicModule } from '@ionic/angular';
+
+@Component({
+  selector: 'app-bind-route',
+  template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>bindToComponentInputs</ion-title>
+    </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <div>
+        <h3>Bind Route</h3>
+        <p id="route-params">Route params: id: {{id}}</p>
+        <p id="query-params">Query params: query: {{query}}</p>
+        <p id="data">Data: title: {{title}}</p>
+        <p id="resolve">Resolve: name: {{name}}</p>
+      </div>
+  </ion-content>
+  `,
+  standalone: true,
+  imports: [IonicModule]
+})
+export class BindComponentInputsComponent implements OnInit {
+
+  @Input() id?: string; // path parameter
+  @Input() query?: string; // query parameter
+  @Input() title?: string; // data property
+  @Input() name?: string; // resolve property
+
+  ngOnInit(): void {
+    console.log('BindComponentInputsComponent.ngOnInit', {
+      id: this.id,
+      query: this.query,
+      title: this.title,
+      name: this.name
+    });
+  }
+
+}

packages/angular/test/apps/ng16/src/app/version-test/version-test-routing.module.ts

@@ -6,7 +6,17 @@ import { RouterModule } from "@angular/router";
     RouterModule.forChild([
       {
         path: 'modal-nav-params',
-        loadComponent: () => import('./modal-nav-params/modal-nav-params.component').then(m => m.ModalNavParamsComponent)
+        loadComponent: () => import('./modal-nav-params/modal-nav-params.component').then(m => m.ModalNavParamsComponent),
+      },
+      {
+        path: 'bind-route/:id',
+        data: {
+          title: 'data:bindToComponentInputs'
+        },
+        resolve: {
+          name: () => 'resolve:bindToComponentInputs'
+        },
+        loadComponent: () => import('./bind-component-inputs/bind-component-inputs.component').then(c => c.BindComponentInputsComponent)
       }
     ])
   ],