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: stackoverflow.com/questions/51343636/… and here stackoverflow.com/questions/57355066/…. Check both posts they should lead u in the right direction. regards — sagat
– sagat, Commented Jul 24, 2020 at 14:42
Thank you very much. Can you provide some example code? I could not figure it out yet — pokly
– pokly, Commented Jul 30, 2020 at 14:39
I will if u provide some information about your component code, for both the list and the detail view — sagat
– sagat, Commented Jul 30, 2020 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
– pokly, Commented Jul 30, 2020 at 15:32

sagat · Accepted Answer · 2020-07-30 18:42:00Z

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, 2020 at 18:42

answered Jul 30, 2020 at 18:32

sagat

1,40614 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

sagat Over a year ago

did it help mate?

pokly Over a year ago

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

sagat Over a year ago

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

Anglesvar · Accepted Answer · 2020-07-24 14:47:42Z

0

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

answered Jul 24, 2020 at 14:47

Anglesvar

1,1549 silver badges18 bronze badges

Collectives™ on Stack Overflow

Select object in a list from previous component Angular

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related