NativeScript / NativeScript/angular
Support Angular 16's new component route data binding
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 55
- Forks
- 13
- Avg merge
- 16m
- Merged PRs (30d)
- 1
Description
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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start at NativeScriptRouterModule.forRoot and inspect how its route configuration handles bindToComponentInputs and the outlet warning. Reproduce the Angular 16 example with route data and an @Input; the work is done when the warning is gone and the component input contains the route data during initialization.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend, mobile
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100