Send message


Open user.service.ts and add a method sendMessage

sendMessage(id: number, message: Message) {
  return + id + '/messages', message);


Open member-messages.component.ts and add a new method sendMessage

newMessage: any = {};

sendMessage() {
  this.newMessage.recipientId = this.recipientId;
  this.userService.sendMessage(this.authService.getUserId(), this.newMessage).subscribe(
    (message: Message) => {
      // reset the form
      this.newMessage.content = '';
    error => this.alertify.error(error)

And in member-messages.component.html

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

Fix the webapi

In MessagesController.CreateMessage we need to change the return value to the full message

if (await _repo.SaveAll())
    // Load the sender detail so that automapper can use it
    var sender = await _repo.GetUser(userId);
    var messageToReturn = _mapper.Map<MessageForList>(message);
    return CreatedAtRoute("GetMessage", new { id = message.Id }, messageToReturn);