You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
Support Angular 16's new component route data binding #114
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})],})exportclassAppRoutingModule{}exportconsttestPageRoute: Route={path: ':page',component: TestComponent,data: {'test': 'test-text'}};import{Component,Input,OnInit}from'@angular/core';
@Component({selector: 'test-component',templateUrl: './test-component.html',})exportclassTestComponentimplementsOnInit{
@Input()publictest;publicngOnInit(): 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.
@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()
),
@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.
Activity
ElecTreeFrying commentedon Oct 6, 2025
@NathanWalker, when do you think this will be implemented? We really need this because the code is much shorter with
bindToComponentInputs/withComponentInputBinding.JakeAi commentedon Oct 6, 2025
Looks like someone added support a while ago so it should be super easy to actually implement.
#141
edusperoni commentedon Oct 6, 2025
I'll try to review and merge that this week, sorry for the delay
JakeAi commentedon Oct 6, 2025
That would be awesome! But I wonder how much it's changed since V16 to V20.
gelagaev commentedon Dec 11, 2025