Select object in a list from previous component Angular

Question

I have a details.component and a list.component. My App is about cars.

You can open up a car in the details component to see it's details. After returning to the list component by pressing the back button (integrated back-button), the car you looked before should be selected/highlighted.

The list component is a large list of all cars. I am using bootstrap. I guess the car from the details component must be overhanded with a service? Or is there a simple solution?

I'm a beginner in angular. I would appreciate any kind of examples. Thank you very much

UPDATE:

list.component

carId$ = this.routerQuery.selectParams<number>('carId').pipe(
    distinctUntilChanged(),
    untilDestroyed(this),
    filter(carId => +carId > 0)
  );

constructor(carService){

this.carId$.subscribe(carid => {
              this.carService.getCarById(+carid);
              console.log(carid)
            })

How can I highlight / select the last viewed car in the html file?

yes you should use a service for that kind of action. I wrote an answer about creating a service in general. Set the lastSelectedCar in the service and observe it (subscribe to it) in the list component, then lookup the lastSelected car in ur list and set the selected style. here: https://stackoverflow.com/questions/51343636/angular-observable-sharing-data-within-components/51344506#51344506 and here https://stackoverflow.com/questions/57355066/how-to-implement-behavior-subject-using-service-in-angular-8/57355485#57355485. Check both posts they should lead u in the right direction. regards — sagat, Jul 24 '20 at 14:42
Thank you very much. Can you provide some example code? I could not figure it out yet — pokly, Jul 30 '20 at 14:39
I will if u provide some information about your component code, for both the list and the detail view — sagat, Jul 30 '20 at 14:54
Each car has an ID. It shows up at the end of the URL. It is the carId (unique). When I open a car on the list component, I get to the detail component. After I press back on my implemented back-button, I get back to the list component. The recently viewed/opened car should be highlighted now. So you have a better overview on which list object you recently viewed. — pokly, Jul 30 '20 at 15:32
My idea is to pass the id from details to the service. The service passes the id to the list component. And in the list component I give the last viewed id a selected/highlighted class — pokly, Jul 30 '20 at 15:33

sagat · Accepted Answer · 2020-07-30T18:42:00.420

1

I created a full example stackblitz for you.

I created two components: cars.component and detail.component I created a car.service.ts which is handling selection and emulating retrieving cars, probably by a backend.

I am getting the id from the url to retrieve the data by a backend call.

Here is the stackblitz: Cars selection service example

edited Jul 30 '20 at 18:42

answered Jul 30 '20 at 18:32

sagat

1,351
12
15

did it help mate? – sagat Jul 31 '20 at 06:57
Yes thanks mate. However I had to edit your solution a little bit. I updated my question. Can you have a look please? Thank you very much – pokly Aug 05 '20 at 11:48
For me there is no difference. You have a service where you can set the last selected car in my solution. Then u just bind your selected car from the service in the template. regards – sagat Aug 06 '20 at 08:18

score 0 · Answer 2 · answered Jul 24 '20 at 14:47

For this, You can use anchor tag with routerLinkActive and routerLinkActiveOptions attribute. Each of your CarList should be wrapped with anchor element. Change the class-name on click on your element.

Something like this,

<a class="nav-link" routerLink="" routerLinkActive="visited" routerLinkActiveOptions="{exact:true}">Benz</a>

Your css code can be something like this,

.visited{
    color:red;
}

Reference : Change color of selected link in angular 4

Select object in a list from previous component Angular

2 Answers2