Skip to content

Commit e5b5f87

Browse files
szuperazszuperaz
authored
Merge pull request #235 from GetStream/customization-guide
Customization guide
2 parents ed96f38 + 62b7ccf commit e5b5f87

30 files changed

+310
-206
lines changed

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -81,9 +81,9 @@ Run `npm start` and navigate to `http://localhost:4200/`.
8181

8282
## Customization examples
8383

84-
This repository includes a sample app that showcases the different customization options of our SDK:
84+
This repository includes a sample app that showcases how you can provide your own template for different components within the SDK:
8585

86-
To test the app:
86+
To run the app:
8787

8888
Create a file named `.env` in the root directory with the following content:
8989

‎docusaurus/docs/Angular/components/AttachmentListComponent.mdx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,5 +33,9 @@ export class CustomMessageComponent {
3333
}
3434
```
3535

36+
## Customization
37+
38+
You can provide your own attachment list component by the [`CustomTemplatesService`](../services/CustomTemplatesService.mdx)
39+
3640
[//]: # "Start of generated content"
3741
[//]: # "End of generated content"

‎docusaurus/docs/Angular/components/AttachmentPreviewListComponent.mdx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,5 +25,9 @@ export class CustomMessageInputComponent {}
2525

2626
The `AttachmentPreviewList` uses the [`AttachmentService`](../services/AttachmentService.mdx) to display the attachment previews.
2727

28+
## Customization
29+
30+
You can provide your own attachment preview list component by the [`CustomTemplatesService`](../services/CustomTemplatesService.mdx)
31+
2832
[//]: # "Start of generated content"
2933
[//]: # "End of generated content"

‎docusaurus/docs/Angular/components/AvatarComponent.mdx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,5 +21,9 @@ export class CustomMessageComponent {
2121
}
2222
```
2323

24+
## Customization
25+
26+
You can provide your own avatar component by the [`CustomTemplatesService`](../services/CustomTemplatesService.mdx)
27+
2428
[//]: # "Start of generated content"
2529
[//]: # "End of generated content"

‎docusaurus/docs/Angular/components/ChannelHeaderComponent.mdx‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,7 @@ The `ChannelHeader` component displays the avatar and name of the currently acti
88

99
## Customization
1010

11-
If you want to, you can create your own custom channel header, here is how to use it:
12-
13-
```html
14-
<stream-channel-list></stream-channel-list>
15-
<stream-channel>
16-
<custom-channel-header></custom-channel-header>
17-
<stream-message-list></stream-message-list>
18-
<stream-notification-list></stream-notification-list>
19-
<stream-message-input></stream-message-input>
20-
</stream-channel>
21-
```
11+
You can provide your own channel header component by the [`CustomTemplatesService`](../services/CustomTemplatesService.mdx)
2212

2313
If you create your own channel header, you can use the [`ChannelService`](../services/ChannelService.mdx) to access the currently active channel. Please note that, the default channel header also contains the menu button to [toggle the channel list](../services/ChannelListToggleService.mdx). Here is a simple implementation of a custom channel header to guide you:
2414

@@ -49,5 +39,9 @@ export class ChannelHeaderComponent {
4939
}
5040
```
5141

42+
## Channel actions
43+
44+
By default no channel action is displayed, but it's possible to [add action buttons to the channel header](../services/CustomTemplatesService.mdx/#channelactionstemplate) component. You can follow our [code example](../code-examples/channel-invites.mdx) that implements the invite action (you can implement other kind of actions as well, for example edit).
45+
5246
[//]: # "Start of generated content"
5347
[//]: # "End of generated content"

‎docusaurus/docs/Angular/components/ChannelListComponent.mdx‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,7 @@ The channel list is always visible on desktop devices, on mobile devices, the li
88

99
**Example 1** - Using a custom channel list component
1010

11-
If you want to create a custom channel list component, here is how to use it:
12-
13-
```html
14-
<custom-channel-list></custom-channel-list>
15-
<stream-channel>
16-
<stream-channel-header></stream-channel-header>
17-
<stream-message-list></stream-message-list>
18-
<stream-message-input></stream-message-input>
19-
</stream-channel>
20-
```
11+
See our [customization guide](../concepts/customization.mdx) on how to provide your own channel list component.
2112

2213
:::note
2314
If you want to create your own channel list, you can use the [`ChannelService`](../services/ChannelService.mdx) to receive the channels and interact with the Stream API.

‎docusaurus/docs/Angular/components/ChannelPreviewComponent.mdx‎

Lines changed: 1 addition & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,7 @@ The `ChannelPreview` component displays a channel preview in the channel list, i
22

33
## Customization
44

5-
The channel list uses the `ChannelPreview` component to display channels, if you want to replace that with your own custom component, here is how to do it:
6-
7-
**Example 1** - custom channel preview component:
8-
9-
```html
10-
<stream-channel-list
11-
[customChannelPreviewTemplate]="customChannelPreviewTemplate"
12-
></stream-channel-list>
13-
<stream-channel>
14-
<stream-channel-header></stream-channel-header>
15-
<stream-message-list></stream-message-list>
16-
<stream-message-input></stream-message-input>
17-
</stream-channel>
18-
19-
<ng-template #customChannelPreviewTemplate let-channel="channel">
20-
<custom-channel-preview [channel]="channel"></custom-channel-preview>
21-
</ng-template>
22-
```
23-
24-
Your custom template can receive the same inputs (with the same name) as the default `ChannelPreview` component.
5+
The channel list uses the `ChannelPreview` component to display channels, if you want to replace that with your own custom component you can use the [`CustomTemplatesService`](../services/CustomTemplatesService.mdx/#channelpreviewtemplate).
256

267
:::note
278

‎docusaurus/docs/Angular/components/IconComponent.mdx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,5 +17,9 @@ export class CustomMessageComponent {
1717
}
1818
```
1919

20+
## Customization
21+
22+
You can provide your own icon component by the [`CustomTemplatesService`](../services/CustomTemplatesService.mdx)
23+
2024
[//]: # "Start of generated content"
2125
[//]: # "End of generated content"

‎docusaurus/docs/Angular/components/LoadingIndicatorComponent.mdx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,5 +20,9 @@ export class CustomMessageComponent {
2020
}
2121
```
2222

23+
## Customization
24+
25+
You can provide your own loading indicator component by the [`CustomTemplatesService`](../services/CustomTemplatesService.mdx)
26+
2327
[//]: # "Start of generated content"
2428
[//]: # "End of generated content"

‎docusaurus/docs/Angular/components/MessageActionsBoxComponent.mdx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,5 +28,9 @@ export class CustomMessageComponent {
2828
}
2929
```
3030

31+
## Customization
32+
33+
You can provide your own message actions box component (or just a template for the items) by the [`CustomTemplatesService`](../services/CustomTemplatesService.mdx)
34+
3135
[//]: # "Start of generated content"
3236
[//]: # "End of generated content"

0 commit comments

Comments
 (0)