# 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:

```markup
<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.

```typescript
@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

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

## Add to routes

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

```typescript
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:

```typescript
export class MemberEditComponent implements OnInit {

  user: User;

  constructor(private _route: ActivatedRoute) { }

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

}
```