I have a menu in my application that uses IDs to route content, and I also have a detailed view where the content should be displayed based on those same IDs.
Currently, I am trying to display objects by their ID when a button is clicked. However, I'm unsure of how to pass the ID value to the item-detail component so it can display the content accordingly. The necessary data is available through a service.
Routing via ID is already functioning correctly:
path: ':id',
component: ItemDetailComponent,
data:
{
title: 'Item Detail',
}
item.component.html (menu component)
The following code snippet shows how an event is triggered:
<ng-container *ngFor="let item of items">
<button (click)="getId(item.id);"></button>
item.component.ts (menu component)
This piece of code captures the object's ID:
getId(datavalue: number)
{
console.log(datavalue);
}
Upon clicking the button, the correct ID is shown in the console log.
Now, the challenge lies in displaying the content in the detailed view based on the ID. I'm uncertain about how to effectively pass the ID to this component.
item-detail.component.html One potential solution might look like this:
<div>
<h2>Text Content</h2>
<p>
{{glossar[datavalue]?.textContent}}
</p>
</div>
Any assistance provided will be greatly appreciated!