angular
                                
                                 angular copied to clipboard
                                
                                    angular copied to clipboard
                            
                            
                            
                        Support Angular 16's new component route data binding
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