Angular 2 Retaining Component Values Across Multiple Components

Question

If I have a list of checkboxes on Component 1 and I check the first checkbox. How do I retain the checked items when I navigate to other components?

Example:

1.) Navigate to Component 1 and check a checkbox for Item 1.

2.) Then I click a button which routes me to Component 2.

3.) Now I click another a button which routes me back to Component 1.```

Result: I want Item 1 to be checked.

How would I achieve that?

You have to use sharedService and make sure that only single instance is shared among components. I could help you with Plunker but it will be very time consuming for me. — Nikhil Shah
Possible duplicate of Angular 2: Swapping between different components without destroying them — Günter Zöchbauer

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2016-03-13T18:36:19

Return true from routerCanReuse() https://angular.io/docs/ts/latest/api/router/CanReuse-interface.html then the same component instance will be reuse instead of creating a new one.

Alternatively (as mentioned by micronyks) you can register a service in a common parent (might be the root component or bootstrap() for application wide sharing) and store and retrieve the values from there.

Angular 2 Retaining Component Values Across Multiple Components

1 Answers