How to Input data to router-outlet

Question

I'm trying to send a @Input decorator trough a <router-outlet>, but can't seem to get the data in the child components, here's what I'm doing:

<!--parent route calls the outlet -->
<router-outlet [unit]="unit?.unit"></router-outlet>

// child route input decorator
export class ClassRoomComponent OnInit {

  @Input() unit: string;

// router module
...

  path: 'unidade/:unit',
    component: UnitComponent,
    children: [
     {
       path: 'turma/:classroom',
       component: ClassroomComponent,
     }
    ]
  },

cosole.log returns me undefined tought, why can't I send thata this way?

You probably need to use route params instead https://stackoverflow.com/questions/34363792/angular2-using-inputs-with-router-outlets or you need to add this data to a service when that `unit?.unit` becomes available. — Alexander Staroselsky, Sep 24 '19 at 14:58

score 0 · Answer 1 · answered Sep 24 '19 at 14:58

What you are trying to do is bind data to the component that is rendered within the <router-outlet>.

But what you are actually doing in this case is trying to bind your property to the <router-outlet> directive. This won't work - it doesn't automatically transfer your binding to the child component.

You need to pass the data in a different way instead. Try using a service, using route params, or pre-fetching component data using resolve: https://angular.io/guide/router#resolve-pre-fetching-component-data

How to Input data to router-outlet

1 Answers1