Angular 16: Router data as component inputs don't work

Question

Here is my code :

@Component({
  template: `
    resolveData: {{resolveA}} <br>
    data : {{ dataA }}
  `,
})
class MyComponent {
  @Input() resolveA?: string;
  @Input() dataA?: string;
}

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [CommonModule, RouterModule],
  template: `
    <h1>Hello from {{name}}!</h1>

    <router-outlet></router-outlet>
  `,
})
export class App {
  name = 'Angular';
}

bootstrapApplication(App, {
  providers: [
    provideRouter(
      [
        {
          path: '**',
          component: MyComponent,
          data: { dataA: 'My static data' },
          resolve: { resolveA: () => 'My resolved data' },
        },
      ],
    ),
  ],
});

MyComponent should display both the static and the resolved data.

Any idea why ?

score 1 · Accepted Answer · answered May 05 '23 at 19:52

Okay I was missing withComponentInputBinding() as second param of provideRouter

As following

provideRouter(
  [
    {
      path: '**',
      component: MyComponent,
      data: { dataA: 'My static data' },
      resolve: { resolveA: () => 'My resolved data' },
    },
  ],
  withComponentInputBinding()
),

Angular 16: Router data as component inputs don't work

1 Answers1