Within my router module, I have a route set up for /dashboard. This route includes multiple components: a parent component and several child components. The data I am trying to pass (an array of objects called tablesPanorama) is being sent from the parent component TischplanComponent (tischplan.component.ts) to a child component DepartmentsComponent (departments.component.ts) using the @Input decorator.
In my app.module.ts file:
const appRoutes: Routes = [
{path: '', component: LoginComponent},
{path: 'login', component: LoginComponent},
{path: 'dashboard', component: TischplanComponent, canActivate: [AuthGuard]},
{path: 'register', component: RegisterComponent},
{path: 'profile', component: ProfileComponent, canActivate: [AuthGuard]}
];
imports: [RouterModule.forRoot(appRoutes)]
Within my app-component-html file:
This is where the router-outlet element is located
<router-outlet></router-outlet>
tischplan.component.html:
<app-departments [tablesPanorama]="tablesPanorama"></app-departments>
Inside departments.component.ts:
@Input('tablesPanorama') tablesPanorama: Table[];
I am encountering an issue where the data is not being passed to the child component. When I console.log(this.tablesPanorama) in the constructor, it returns undefined:
constructor(private tischplanService: TischplanService) {
console.log("this.tablesPanorama:");
console.log(this.tablesPanorama);
}
The connection between the @Input and the <router-outlet>:
From my understanding, the @Input is defined in the child component called DepartmentComponent, which receives the tablesPanorama variable from the parent component TischplanComponent that is associated with the /dashboard route in the <router-outlet> within the app.component.ts file.