Fetching the parameter 'id' only from the corresponding page component seems to be a challenge. The params id cannot be accessed from other individual components such as the header component.
//The code snippet below works only in the corresponding component
this.activatedRoute.paramMap.subscribe( params => {
this.projectName = params.get("id");
console.log(this.projectName);
})
//I attempted these codes, but faced an issue
console.log(this.activatedRoute.children[0].children[1].params['id'])
this.activatedRoute.firstChild.params.subscribe(params => {
let id = +params['id'];
console.log(id)
});
A console error occurred (line number indicates where I tried to log on the page) at HeaderComponent.push../src/app/common/header/header.component.ts.HeaderComponent.ngOnInit
Structure
<app-header></app-header>
<router-outlet></router-outlet>
app.module.ts
app-routing.module.ts
common/
--header.component.ts
projects/
component-folder
--projects.module.ts
--projects-routing.module.ts (child route)
Alternatively, is there a way to access the params from directives?