# 10.8: Sending Messages

Now we'll work on getting the send message functionality from the `PhotoEditor` component functional.

## Add sendMessage() to UserService

We'll start off by adding a `sendMessage()` method to the `UserService`. This will again be very similar to other methods we've written:

```typescript
sendMessage(id: number, message: Message) {
    return this._http.post<Message>(this.baseUrl + 'users/' + id + '/messages', message);
}
```

## Update MemberMessagesComponent

Add a new property to `member-messages.component.ts` called `newMessage`.

```typescript
newMessage: any = {};
```

Also, add a new method called `sendMessage()`:

```typescript
sendMessage() {
    this.newMessage.recipientId = this.userId;
    this._userService.sendMessage(this._authService.decodedToken.nameid, this.newMessage).subscribe(message => {
      this.messages.unshift(message);
      this.newMessage.content = '';
    }, error => {
      this._alertify.error(error);
    });
}
```

## Update MemberMessges Template

Next, in `member-messages.component.html` - update the `<form>` in the footer to:

```markup
<div class="card-footer">
    <form #messageForm="ngForm" (ngSubmit)="messageForm.valid && sendMessage()">
        <div class="input-group">
            <input
            type="text"
            class="form-control form-control-sm"
            required
            name="content"
            [(ngModel)]="newMessage.content"
            placeholder="Send a private message">
            <span class="input-group-btn">
            <button
                class="btn btn-primary btn-sm"
                [disabled]="!messageForm.valid">Send</button></span>
        </div>
    </form>
</div>
```

It should work now! Open the browser and test it out.

![AngularSendMessage](https://122480229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YfVcpLNVPaSQtyc%2F-LAU8fPjgm_DRb3Jf3Aw%2F-LAU8wmi2ZjPM6pAYe9w%2Fangularsendmessage.png?generation=1524162352157380\&alt=media)
