# 10.9: Deleting Messages

Now we'll implement deleting messages. As explained earlier - we'll only actually delete the message if both users delete it. Otherwise, we'll mark it as deleted for that user and not display it for them.

## Deleting Messages in the API

We'll start off in the `.API` and we'll implement a `DeleteMessage()` method in `MessageController.cs`. Because we aren't necessarily deleting a message - we'll make it a `POST` instead of a `DELETE`.

```csharp
[HttpPost("{id}")]
public async Task<IActionResult> DeleteMessage(int id, int userId)
{
    if (userId != int.Parse(User.FindFirst(ClaimTypes.NameIdentifier).Value))
        return Unauthorized();

    var message = await _messageService.GetMessage(id);

    if (message.SenderId == userId)
        message.SenderDeleted = true;

    if (message.RecipientId == userId)
        message.RecipientDeleted = true;

    if (message.SenderDeleted && message.RecipientDeleted)
        _userService.Delete(message);

    if (await _messageService.SaveAll())
        return NoContent();

    throw new Exception("Error deleting the message");
}
```

We'll check whether the sender or receiver are requesting the delete and mark the corresponding deleted property to true.

If both are true - we use our generic `Delete()` method to delete the `Message` from the database.

We already added checks in our `MessageService` in the `GetMessagesForUser()` and `GetMessageThread()` methods to see if a message is marked as deleted before returning it to a user.

## Deleting Messages in Angular

As usual, we'll start in our `UserService` and add a method. This time it will be `deleteMessage()`.

```typescript
deleteMessage(id: number, userId: number) {
    return this._http.post(this.baseUrl + 'users/' + userId + '/messages/' + id, {});
}
```

Next, in `messages.component.ts` we'll add a method - also called `deleteMessage()`.

We'll also need to import `underscore` to make use of their `splice()` function:

```typescript
import * as _ from 'underscore';
```

```typescript
deleteMessage(id: number) {
    this._alertify.confirm('Are you sure you want to delete the message?', () => {
      this._userService.deleteMessage(id, this._authService.decodedToken.nameid).subscribe(() => {
        this.messages.splice(_.findIndex(this.messages, {id: id}), 1);
        this._alertify.success('Message has been deleted');
      }, error => {
        this._alertify.error('Failed to delete the message');
      });
    });
}
```

We'll use Alertify to prompt the user to confirm they want to delete the message.

If they do, we'll send the request to our "delete" endpoint and remove it from the `messages` array in the component.

Finally, in `messages.component.html`, we'll add a click listener to the `Delete` button.

```markup
<td><button class="btn btn-danger" (click)="deleteMessage(message.id)"><i class="fa fa-trash-o mr-1"></i>Delete</button></td>
```

Right now, it works. But, because the parent element wants to redirect us to the `MemberDetail` template with the `Messages` tab opened - this click event propagates to the parent redirect - which, we don't want in this case.

This can be prevented by added a second click event to the element:

```markup
<td><button class="btn btn-danger" (click)="$event.stopPropagation()" (click)="deleteMessage(message.id)"><i class="fa fa-trash-o mr-1"></i>Delete</button></td>
```