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. — micronyks
– micronyks, Commented Mar 13, 2016 at 18:30
Possible duplicate of Angular 2: Swapping between different components without destroying them — Günter Zöchbauer
– Günter Zöchbauer, Commented Mar 13, 2016 at 18:36

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

2

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.

answered Mar 13, 2016 at 18:36

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

Collectives™ on Stack Overflow

Angular 2 Retaining Component Values Across Multiple Components

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related