Skip to content

Support Angular 16's new component route data binding  #114

@JakeAi

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions