I am attempting to showcase the value of the activated route parameter on the screen, but I am facing difficulties.
In the initial component, my code looks like this:
<ul *ngFor="let cate of categories;">
<li (click)="onviewChecklists(cate.id)">
<a> {{i+1}} {{cate.category}} </a>
</li>
</ul>
onviewChecklists(category:string){
this._router.navigate(["tsafety/checklist-management/categories/items",
{category:category}])
}
Now, in the second component where I am navigating to, my code is as follows:
category:any;
constructor(
private _router:Router,private activeRoute:ActivatedRoute
) {
}
ngOnInit() {
this.category = this.activeRoute.snapshot.params['category'];
console.log(this.category); //this works
}
//On this component HTML {{category}} only returns the first param
In the HTML file of the second component, when I use {{category}}, it only displays the value of the first routing. For example:
navigate 1 param is checklist display is checklist
navigate 2 param is newcheck display is checklist
I have checked that the console.log() prints the correct value, but {{category}} only shows the first value.
In the second component, I have also tried the following:
ngOnInit() {
this.onGetItems(+this.activeRoute.snapshot.params['category']);
}
onGetItems(category){
return this._checklistitemsService.getAllItems(category)
.subscribe(
res=>{
this.checklistitems = res
}
)
The onGetItems method is only called once.