Array shown as undefined in child component when using parametric route Angular

in a few words what I'm trying to do here is displaying some property of a specific item of the jobs array in a child component when navigating to /jobs/:id

Partent Component

export class HomeComponent implements OnInit {

public jobs!: JobInterface[]

constructor(
private jobsService: JobsService
) {
}

ngOnInit() {
this.getJobs()
}


getJobs(page = 1, filters = {city: 'Rome, Italy', level: ''}): void {
this.jobsService.getJobs(page, filters)
.subscribe((response) => {
this.jobs = response.results.map(job => ({
id: job.id,
contents: job.contents,
name: job.name,
publication_date: job.publication_date,
locations: job.locations,
levels: job.levels,
company: job.company

})
)
})
}

}


everything works on the routing perspective but into the child component the jobs array is shown as undefined making me unable to it for the desired item:

Child component

export class JobDetailsComponent implements OnInit {
jobId : any
@Input() jobs! : JobInterface[]
selectedJob : any
constructor(private ActivatedRoute : ActivatedRoute) { }

ngOnInit(): void {
this.jobId = this.ActivatedRoute.snapshot.paramMap.get('id')
console.log(this.jobs)
this.selectedJob = this.jobs.filter(this.jobId)

}

}


Partent component's HTML

<app-search-bar (OutputFilters)="getFilteredResults($event)" ></app-search-bar>
<app-job-cards [jobs]="jobs"></app-job-cards>
<app-job-details [jobs]="jobs"></app-job-details>


what is the correct way to do this? What am I doing wrong here?

Continue reading...