7.0: Member Edit Component

Now, we're going to add a MemberEditComponent where a logged in user can make changes to their profile page. This will be similar to the MemberDetailComponent, but with added functionality.

Generate the MemberEditComponent

In the root of your SPA project, run the following command:

ng g c members/member-edit --no-spec

Ensure that it is imported into the app.module.ts

Add a Link in Navbar Dropdown

Next, we need to update the link in our navbar dropdown.

Open up nav.component.html, and in the dropdown section, update it to use a routerLink:

<a class="dropdown-item" [routerLink]="['/member/edit']" ><i class="fa fa-user"></i>Edit Profile</a>

Add a Resolver

To bring in the user's data, we'll add another resolver.

In the resolvers folder, add a new file called member-edit.resolver.ts. This file will be very similar to the member-detail.resolver.ts file - so, feel free to reuse the code and edit it accordingly.

@Injectable()
export class MemberEditResolver implements Resolve<User> {

    constructor(
        private _userService: UserService,
        private _router: Router,
        private _authService: AuthService) {}

    resolve(route: ActivatedRouteSnapshot): Observable<User> {
        return this._userService.getUser(this._authService.decodedToken.nameid);
    }
}

Next, we need to import the resolver and add it to the providers array in our app.module.ts

providers: [
    AuthService,
    UserService,
    AuthGuard,
    MemberDetailResolver,
    MemberListResolver,
    ErrorInterceptorProvider,
    AlertifyService,
    MemberEditResolver
  ],

Add to routes

We need to add the new component to our routes.ts file:

children: [
    { path: 'members', component: MemberListComponent, resolve: {users: MemberListResolver } },
    { path: 'members/:id', component: MemberDetailComponent, resolve: { user: MemberDetailResolver }},
    { path: 'member/edit', component: MemberEditComponent, resolve: { user: MemberEditResolver }},
    { path: 'messages', component: MessagesComponent },
    { path: 'followers', component: FollowersComponent },
]

Update Component Controller

In member-edit.component.ts, update the class to the following:

export class MemberEditComponent implements OnInit {

  user: User;

  constructor(private _route: ActivatedRoute) { }

  ngOnInit() {
    this._route.data.subscribe(data => {
      this.user = data['user'];
    });
  }

}