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:

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.

newMessage: any = {};

Also, add a new method called sendMessage():

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:

<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