Adding id to url of an angular component so user can use "back" in browser

Question

I have a list of items that is getting displayed in a list.component from an angular Service.

When the user clickes on one of those Items it shows an before via css hidden div that shows the details of the clicked item:

<div class="show-on-click"
<show-details-component [currentService]="currentService" [localServices]="localServices"></show-details-component>
</div>

This component displays the details of the clicked item via the Input() decorator.

I am looking for a was to pass an id or a word, doesn't matter, to the url so that I either way create a link to the details of specific item and that the user can use the "back" button to get back to the list and not leave the whole component.

I did check the documentation of angular and searched a lot; it could not find a solution.

I would appreciate a hint! Thanks a lot

Answer 1

I think you should implement router strategy in order to show item details.

You can use sub routes and place wherever you want in the html. In this case you will have possibility to add button 'back' and call this.location.back(), or use browser history controls.
Data you can pass via shared service, or router params.