I'm currently facing an issue where I am trying to extract a value from the URL and inject it into a child component. While I can successfully retrieve the parameter from the URL and update my DOM with a property, the behavior changes when I attempt to inject the same property into a child component.
Here is my parent component:
@Component({
selector: 'app-posts',
templateUrl:
`
<div class="container">
<h1><app-task-title [taskId]="router"></app-task-title></h1>
<h2>{{router}}</h2>
<app-tab [tacheLabelId]="router"></app-tab>
</div>
`,
styleUrls: ['./posts.component.scss']
})
export class PostsComponent implements OnInit, DoCheck {
/**Variables from the url */
router! : number
constructor(private route : ActivatedRoute) { }
ngDoCheck(): void {
this.router = Number(this.route.snapshot.paramMap.get('route'));
}
ngOnInit(): void {
}
}
The h2 tag updates but the other components do not
This is my child component:
@Component({
selector: 'app-task-title',
template: `
{{taskLabel}}
`,
styles: [
]
})
export class TaskTitleComponent implements OnInit {
@Input() taskId! : number;
taskLabel!: string;
constructor() { }
ngOnInit(): void {
switch (this.taskId) {
case 1:
this.taskLabel = "Title 1"
break;
case 2:
this.taskLabel = "Title 2"
break;
case 3:
this.taskLabel = "Title 3"
break;
case 4:
this.taskLabel = "Title 4"
break;
default:
this.taskLabel = "Title 0"
break;
}
}
}
Attempts made so far:
- Used the router property as a string and tried using the syntax:
, but encountered the same result.<h1><app-task-title taskId={{router}}></app-task-title></h1> - Implemented a method that returns the value in the DOM.
If you have insights on how the property behaves in the DOM, any explanation would be appreciated.