# MessageBlockedComponent

> **Info:** This is release candidate documentation for **Stream Chat Angular SDK v8**. For the latest stable version, see the [latest version (v7)](https://getstream.io/chat/docs/sdk/angular/).

The `MessageBlockedComponent` component displays a placeholder when a message was [blocked by moderation](https://getstream.io/moderation/docs/node/).

**Example 1** - a message that was blocked:

![Message Blocked Screenshot](https://getstream.io/docs-assets/images/a0427841b809.png)

## Basic usage

A typical use case for the `MessageBlockedComponent` component would be to use in your custom components that will completely override the message component.

A message is blocked if its `type` is `error` and `message.moderation?.action` is `remove`. The built-in message component displays the placeholder in that case.

```typescript
@Component({
  selector: "app-custom-message",
  template: `
    <stream-message-blocked
      *ngIf="isBlocked; else messageContent"
      [isMyMessage]="isMine"
      [message]="message"
    ></stream-message-blocked>
    <ng-template #messageContent>
      <!-- Other parts of the custom message component -->
      <div>{{ message.text }}</div>
    </ng-template>
  `,
})
export class CustomMessageComponent {
  @Input() message!: StreamMessage;
  // set this when message changes
  isMine = false;

  get isBlocked() {
    return (
      this.message.type === "error" &&
      this.message.moderation?.action === "remove"
    );
  }
}
```

## Customization

### Displayed text

You can customize the text displayed in the placeholder using the [`StreamI18nService`](https://getstream.io/chat/docs/sdk/angular/v8/services/StreamI18nService/)

```ts
this.streamI18nService.setTranslation("en", {
  "Message was blocked by moderation policies": "<your placeholder text>",
});
```

### CSS

You can use theme variables of the message component to customize the blocked message placeholder:

- You can find message component theme variables [on GitHub](https://github.com/GetStream/stream-chat-css/blob/main/src/v2/styles/Message/Message-theme.scss)
- You can find more information about CSS variables in the [theming guide](https://getstream.io/chat/docs/sdk/angular/v8/theming/themingv2/)

### Custom component

You can provide your own custom template for the `MessageBlockedComponent`, using the `messageBlockedTemplate$` of the [`CustomTemplatesService`](https://getstream.io/chat/docs/sdk/angular/v8/services/CustomTemplatesService/)

Please note that, if you have [date separators enabled](https://getstream.io/chat/docs/sdk/angular/v8/components/MessageListComponent/#displaydateseparator), you shouldn't display an empty template (hiding message blocked component), because that can lead to unnecessary date separators in the message list.

[//]: # "Start of generated content"

## Inputs and outputs

### message

**message**: `undefined` \| `StreamMessage`

The message that has been blocked.

#### Defined in

[lib/message-blocked/message-blocked.component.ts:17](https://github.com/GetStream/stream-chat-angular/blob/8ed7ea67ea3deb96c2ae7fcccfd82bd32ad7f184/projects/stream-chat-angular/src/lib/message-blocked/message-blocked.component.ts#L17)

---

### isMyMessage

**isMyMessage**: `boolean` = `false`

Whether the message is the current user's own message.

#### Defined in

[lib/message-blocked/message-blocked.component.ts:21](https://github.com/GetStream/stream-chat-angular/blob/8ed7ea67ea3deb96c2ae7fcccfd82bd32ad7f184/projects/stream-chat-angular/src/lib/message-blocked/message-blocked.component.ts#L21)

[//]: # "End of generated content"

---

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/angular/v8/components/MessageBlockedComponent/](https://getstream.io/chat/docs/sdk/angular/v8/components/MessageBlockedComponent/).