Reusable component with binding and route data
Now, let's refactor the viewUser
component, so that we can reuse it in multiple contexts. One where it can load its own data using a resolve guard, suitable for a master/detail view and another, where we can bind the current user to it, as we have done in the Review step of the multi-step input form we built in the prior section:
- Update
viewUser
component with the following changes:
src/app/user/view-user/view-user.component.ts ... import { ActivatedRoute } from '@angular/router' export class ViewUserComponent implements OnChanges, OnInit { ... constructor(private route: ActivatedRoute) {} ngOnInit() { if (this.route.snapshot && this.route.snapshot.data['user']) { this.currentUser = User.BuildUser(this.route.snapshot.data['user']) this.currentUser.dateOfBirth = Date.now() // for data mocking purposes only } } ...
We now have two independent events. One for ngOnChanges
, which handles what value gets assigned...