Support Angular 16's new component route data binding

[JakeAi]

Environment Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

• NativeScript-Angular: 16
• Angular: 16

Describe the bug

In angular 16, you can add bindToComponentInputs to Angular's Router Module imports: [NativeScriptRouterModule.forRoot(routes, { bindToComponentInputs: true })], to automatically populate @Input() properties in the component. Doing so in Nativescript—Angular warns the dev CONSOLE WARN: 'withComponentInputBinding' feature is enabled but this application is using an outlet that may not support binding to component inputs.

To Reproduce

Add bindToComponentInputs: true to the forRoot function's 2nd parameter config object.

import { NgModule } from '@angular/core';

@NgModule({
  imports: [NativeScriptRouterModule.forRoot(routes, { bindToComponentInputs: true })],
})
export class AppRoutingModule {}

export const testPageRoute: Route = {
  path: ':page',
  component: TestComponent ,
  data: {'test': 'test-text'}
};

import { Component, Input, OnInit } from '@angular/core';
@Component({
  selector: 'test-component',
  templateUrl: './test-component.html',
})
export class TestComponent implements OnInit {
  @Input() public test;

  public ngOnInit(): void {
    console.log(this.test); // should populate with 'test-text'
  }
}

Expected behavior this.test should populate with the data from the route without having to query in the OnInit lifecycle.

Additional context https://blog.angular.io/angular-v16-is-here-4d7a28ec680d#398f

[ElecTreeFrying]

@NathanWalker, when do you think this will be implemented? We really need this because the code is much shorter with bindToComponentInputs / withComponentInputBinding.

import { provideNativeScriptRouter } from '@nativescript/angular';
import { withComponentInputBinding } from '@angular/router';

  provideNativeScriptRouter(routes, 
    withComponentInputBinding()
  ),

  {
    path: 'blog/:id',
    ...
  },

  readonly id = input();

[JakeAi]

@NathanWalker, when do you think this will be implemented? We really need this because the code is much shorter with bindToComponentInputs / withComponentInputBinding.

import { provideNativeScriptRouter } from '@nativescript/angular';
import { withComponentInputBinding } from '@angular/router';

  provideNativeScriptRouter(routes, 
    withComponentInputBinding()
  ),

  {
    path: 'blog/:id',
    ...
  },

  readonly id = input();

Looks like someone added support a while ago so it should be super easy to actually implement.

https://github.com/NativeScript/angular/pull/141

[edusperoni]

I'll try to review and merge that this week, sorry for the delay

[JakeAi]

I'll try to review and merge that this week, sorry for the delay

That would be awesome! But I wonder how much it's changed since V16 to V20.

[gelagaev]

I'll try to review and merge that this week, sorry for the delay Any news?