Reusing components with binding and route data

Now, let’s refactor the viewUser component so that we can reuse it in multiple contexts. User information is displayed in two places in the app per the mock-ups created.

The first place is the Review step of the user profile that we implemented in the previous chapter. The second place is on the user management screen on the /manager/users route, as follows:

Figure 9.1: Manager user management mock-up

To maximize code reuse, we must ensure that our shared ViewUser component can be used in both contexts.

In the first use case, we bind the current user to the Review step of the multi-step input form. In the second use case, the component will need to load its data using a resolve guard, so we don’t need to implement additional logic to achieve our goal:

1. Update the viewUser component to inject the Router and ActivatedRoute. In ngOnInit we need to set currentUser from the route in and subscribe...