The MessageBubble structure can typically be broken down into the following views:
1. **Leading view**: This is where the sender's avatar is displayed. It's typically on the left of the MessageBubble for messages from others and on the right for messages from the current user.
2. **Header view**: This displays the sender's name and is especially useful in group chats where multiple users are sending messages.
3. **Reply view**: This view can be used to extend the MessageBubble with additional elements. It's typically placed above the Content view.
4. **Content view**: This is the core of the MessageBubble where the message content (text, images, videos, etc.) is displayed.
5. **Bottom view**: This view can be used to extend the MessageBubble with additional elements, such as link previews or a 'load more' button for long messages. It's typically placed beneath the Content view.
6. **Thread view**: This is where the thread reply icon and reply counts are displayed. It's located below the footer view.
7. **Footer view**: This is where the reactions are displayed. It's located at the bottom of the MessageBubble.
8. **status Info view**: This is where the timestamp of the message and its delivery or read status are displayed. It's located inside the MessageBubble just below the content view.
### Properties
MessageTemplate provides you with methods that allow you to alter various properties of the MessageBubble. These properties include aspects such as the `type` and `category` of a message, the appearance and behavior of the header, content, and footer sections of the message bubble,
1. **type**
Using `type` you can set the type of CometChatMessage, This will map your MessageTemplate to the corresponding CometChatMessage. You can set the MessageTemplete Type using the following code snippet.
2. **category**
Using `category` you can set the category of a MessageTemplate. This will create a MessageTemplate with the specified category and link it with a CometChatMessage of the same category.
Please refer to our guide on [Message Categories](/sdk/javascript/message-structure-and-hierarchy) for a deeper understanding of message categories.
3. **headerView**
The `headerView` method allows you to assign a custom header view to the MessageBubble. By default, it is configured to display the sender's name.
4. **contentView**
The `contentView` method allows you to assign a custom content view to the MessageBubble. By default, it displays the [Text Bubble](/ui-kit/angular/text-bubble), [Image Bubble](/ui-kit/angular/image-bubble), [File Bubble](/ui-kit/angular/file-bubble), [Audio Bubble](/ui-kit/angular/audio-bubble), or [Video Bubble](/ui-kit/angular/video-bubble), depending on the message type.
5. **footerView**
The `footerView` method allows you to assign a custom Footer view to the MessageBubble. By default it shows thr reactions for the message bubble.
6. **bottomView**
The `bottomView` method allows you to assign a custom Bottom view to the MessageBubble. By defuault is has buttons such as link previews or a 'load more' button for long messages.
7. **bubbleView**
The `bubbleView` method allows you to assign a custom Bubble view to the MessageBubble. By default, headerView, contentView, statusInfoView and footerView together form a message bubble.
8. **statusInfoView**
The `statusInfoView` method allows you to assign a custom status info view to the MessageBubble. By default, it displays the receipt and timestamp.
9. **options**
The `options` lets you set the list of actions that a user can perform on a message. This includes actions like reacting to, editing, or deleting a message.
***
```javascript theme={null}
definedTemplates!: CometChatMessageTemplate[];
ngOnInit(): void {
this.definedTemplates = [
new CometChatMessageTemplate({
type: CUSTOM_MESSAGE_TYPE,
category: CometChatUIKitConstants.MessageCategory.custom,
headerView: ()=> { /*return custom template ref*/},
contentView: ()=> { /*return custom template ref*/},
footerView: ()=> { /*return custom template ref*/},
bottomView: ()=> { /*return custom template ref*/},
bubbleView: ()=> { /*return custom template ref*/},
options: //your custom options
})
];
}
```
***
## Customization
Let's dive into how you can use the [properties](#properties) of MessageTemplate to customize an existing template or add a new one to the [MessageList](/ui-kit/angular/message-list) component.
The First step is to fetch the list of existing templates when you want to modify or add to them. This can be done using the getAllMessageTemplates() method from the DataSource of the CometChatUIKit class.
```
definedTemplates!: CometChatMessageTemplate[];
```
### Existing Templates
You will need to first get the MessageTemplate object for the type of message you want to customize. You will be customizing the TextMessage Bubble here. The code snippet to get the Text MessageTemplate is as follows.
**Custom**
