# 7.1: Profile Template

The MemberEditComponent template will be very similar to the MemberDetailComponent template - just with some changes to allow for editing.

## Updating MemberEditComponent

## Add Styles

Add the styles from the member-detail.component.scss to member-edit.component.scss

```css
.container {
    margin-top: 1rem;
}

.btn {
    flex-grow: 1;
}

.card {
    width: 23rem;
}

.card-image-top {
    width: 100%;
    height: 100%;
}

.card-header {
    font-size: 2rem;
    font-weight: bold;
}

.card-body {
    padding: 0 25px;
}
```

## Add Dynamic Button and Warning Message

Let's add some dynamic functionality. We'll disable the 'Save Changes' button if there are no changes to the form.

```markup
<button [disabled]="!editForm.dirty" class="btn btn-primary">Save Changes</button>
```

We'll also make the alert box hidden unless there have been changes made.

```markup
<div [hidden]="!editForm.dirty" class="alert alert-info text-center">
    <p>You have made changes. Any unsaved changes will be lost!</p>
</div>
```

## Add updateUser() Method

Now, we need to stub out the updateUser() method we're using to submit our form.

We don't have the method on our backend, so for now - we can just console.log our form and verify that it's working correctly.

In `member-edit.component.ts`, add the following method and inject `alertify` into the constructor:

```typescript
constructor(
    //  ...
    private _authService: AuthService) { }

//  ...

updateUser() {
  console.log(this.user);
  this._alertify.success('Profile updated successfully');
}
```

Our submit button is outside of our form, so we need to "hook up" the button and the form.

```markup
<button [disabled]="!editForm.dirty" form="editForm" class="btn btn-primary btn-block">Save Changes</button>
```

```markup
<form #editForm="ngForm" id="editForm">
```

## Toggle the Information Panel

Our information box informing the user that changes have been made doesn't disappear after hitting submit at the moment.

Let's do this with ViewChild - the template is considered to be a child of the component. We can access the properties of the form with `@ViewChild()`. :

```typescript
export class MemberEditComponent implements OnInit {

  user: User;
  @ViewChild('editForm') editForm: NgForm;


//  ...

  updateUser() {
    console.log(this.user);
    this._alertify.success('Profile updated successfully');
    this.editForm.reset(this.user);                             //  added
  }
```