Skip to content

Commit 1a0caaa

Browse files
szuperazszuperaz
authored
Merge pull request #233 from GetStream/extended-customizations
feat: Extended customization #229
2 parents 79be1b7 + 487e3b8 commit 1a0caaa

File tree

66 files changed

+1815
-446
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

66 files changed

+1815
-446
lines changed

‎docusaurus/docs/Angular/code-examples/channel-invites.mdx‎

Lines changed: 59 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ This guide gives you a step-by-step tutorial on how to use [channel invites](htt
1212

1313
## Invite button
1414

15-
The [`ChannelHeader`](../components/ChannelHeaderComponent.mdx) component has an input called `channelActionsTemplate` that can be used to add action buttons to the channel header.
15+
The [`CustomTemplatesService`](../services/CustomTemplatesService.mdx) has a property called `channelActionsTemplate$` that can be used to add action buttons to the [channel header](../components/ChannelHeaderComponent.mdx).
1616

1717
Let's create a component for the invite button that we'll add to the channel header:
1818

@@ -199,39 +199,71 @@ export class InviteButtonComponent implements OnInit, OnChanges {
199199

200200
### Providing the invite button to the channel header
201201

202-
Lastly, we provide the `InviteButton` component to the `ChannelHeader`
202+
Lastly, we provide the `InviteButton` component to the `ChannelHeader`.
203203

204-
```html
205-
<div id="root">
206-
<stream-channel-list></stream-channel-list>
207-
<stream-channel>
208-
<stream-channel-header
209-
[channelActionsTemplate]="channelActionsTemplate"
210-
></stream-channel-header>
211-
<stream-message-list></stream-message-list>
212-
<stream-notification-list></stream-notification-list>
213-
<stream-message-input
214-
[emojiPickerTemplate]="emojiPickerTemplate"
215-
></stream-message-input>
216-
<stream-thread name="thread">
217-
<stream-message-list
218-
name="thread-message-list"
219-
mode="thread"
220-
></stream-message-list>
221-
<stream-message-input
222-
mode="thread"
223-
name="thread-message-input"
224-
[emojiPickerTemplate]="emojiPickerTemplate"
225-
></stream-message-input>
226-
</stream-thread>
227-
</stream-channel>
228-
</div>
204+
Create the template (for example in your `AppComponent`):
229205

206+
```html
230207
<ng-template #channelActionsTemplate let-channel="channel">
231208
<app-invite-button [channel]="channel"></app-invite-button>
232209
</ng-template>
233210
```
234211

212+
Register the template in your TypeScript code (for example in your `AppComponent`):
213+
214+
```typescript
215+
import {
216+
AfterViewInit,
217+
Component,
218+
TemplateRef,
219+
ViewChild,
220+
} from "@angular/core";
221+
import {
222+
ChatClientService,
223+
ChannelService,
224+
StreamI18nService,
225+
} from "stream-chat-angular";
226+
import {
227+
CustomTemplatesService,
228+
ChannelActionsContext,
229+
} from "stream-chat-angular";
230+
import { environment } from "../environments/environment";
231+
232+
@Component({
233+
selector: "app-root",
234+
templateUrl: "./app.component.html",
235+
styleUrls: ["./app.component.scss"],
236+
})
237+
export class AppComponent implements AfterViewInit {
238+
@ViewChild("channelActionsTemplate")
239+
private channelActionsTemplate!: TemplateRef<ChannelActionsContext>;
240+
241+
constructor(
242+
private chatService: ChatClientService,
243+
private channelService: ChannelService,
244+
private streamI18nService: StreamI18nService,
245+
private customTemplatesService: CustomTemplatesService
246+
) {
247+
void this.chatService.init(
248+
environment.apiKey,
249+
environment.userId,
250+
environment.userToken
251+
);
252+
void this.channelService.init({
253+
type: "messaging",
254+
members: { $in: [environment.userId] },
255+
});
256+
this.streamI18nService.setTranslation();
257+
}
258+
259+
ngAfterViewInit(): void {
260+
this.customTemplatesService.channelActionsTemplate$.next(
261+
this.channelActionsTemplate
262+
);
263+
}
264+
}
265+
```
266+
235267
This is how the channel header looks with the invite button present:
236268

237269
<img src={InviteButton} width="600" />

‎docusaurus/docs/Angular/code-examples/emoji-picker.mdx‎

Lines changed: 56 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -153,38 +153,70 @@ button {
153153

154154
## Provide your custom template
155155

156-
Let's provide our custom emoji picker template to the [`MessageInput`](../components/MessageInputComponent.mdx) component:
156+
Let's create the template for the emoji picker (for example in your `AppComponent`):
157157

158158
```html
159-
<div id="root">
160-
<stream-channel-list></stream-channel-list>
161-
<stream-channel>
162-
<stream-channel-header></stream-channel-header>
163-
<stream-message-list></stream-message-list>
164-
<stream-notification-list></stream-notification-list>
165-
<stream-message-input
166-
[emojiPickerTemplate]="emojiPickerTemplate"
167-
></stream-message-input>
168-
<stream-thread name="thread">
169-
<stream-message-list
170-
name="thread-message-list"
171-
mode="thread"
172-
></stream-message-list>
173-
<stream-message-input
174-
mode="thread"
175-
name="thread-message-input"
176-
[emojiPickerTemplate]="emojiPickerTemplate"
177-
></stream-message-input>
178-
</stream-thread>
179-
</stream-channel>
180-
</div>
181-
182159
<!-- The MessageInput component will provide the emojiInput$ to emit the selected emojis and insert them in the textarea -->
183160
<ng-template #emojiPickerTemplate let-emojiInput$="emojiInput$">
184161
<app-emoji-picker [emojiInput$]="emojiInput$"></app-emoji-picker>
185162
</ng-template>
186163
```
187164

165+
Register the template in your TypeScript code (for example in your `AppComponent`):
166+
167+
```typescript
168+
import {
169+
AfterViewInit,
170+
Component,
171+
TemplateRef,
172+
ViewChild,
173+
} from "@angular/core";
174+
import {
175+
ChatClientService,
176+
ChannelService,
177+
StreamI18nService,
178+
} from "stream-chat-angular";
179+
import {
180+
CustomTemplatesService,
181+
EmojiPickerContext,
182+
} from "stream-chat-angular";
183+
import { environment } from "../environments/environment";
184+
185+
@Component({
186+
selector: "app-root",
187+
templateUrl: "./app.component.html",
188+
styleUrls: ["./app.component.scss"],
189+
})
190+
export class AppComponent implements AfterViewInit {
191+
@ViewChild("emojiPickerTemplate")
192+
private emojiPickerTemplate!: TemplateRef<EmojiPickerContext>;
193+
194+
constructor(
195+
private chatService: ChatClientService,
196+
private channelService: ChannelService,
197+
private streamI18nService: StreamI18nService,
198+
private customTemplatesService: CustomTemplatesService
199+
) {
200+
void this.chatService.init(
201+
environment.apiKey,
202+
environment.userId,
203+
environment.userToken
204+
);
205+
void this.channelService.init({
206+
type: "messaging",
207+
members: { $in: [environment.userId] },
208+
});
209+
this.streamI18nService.setTranslation();
210+
}
211+
212+
ngAfterViewInit(): void {
213+
this.customTemplatesService.emojiPickerTemplate$.next(
214+
this.emojiPickerTemplate
215+
);
216+
}
217+
}
218+
```
219+
188220
This is how our emoji picker looks like:
189221

190222
<img src={Screenshot} width="500" />

‎docusaurus/docs/Angular/code-examples/mention-actions.mdx‎

Lines changed: 57 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -10,30 +10,73 @@ In this example, we will demonstrate how to create custom mention actions if a u
1010

1111
## Custom mention template
1212

13-
You can provide a custom message template to the `MessageList` component:
13+
You can provide a custom message template to the [`CustomTemplatesService`](../services/CustomTemplatesService.mdx):
1414

15-
```html
16-
<div id="root">
17-
<stream-channel-list></stream-channel-list>
18-
<stream-channel>
19-
<stream-channel-header></stream-channel-header>
20-
<stream-message-list
21-
[mentionTemplate]="mentionTemplate"
22-
></stream-message-list>
23-
<stream-notification-list></stream-notification-list>
24-
<stream-message-input></stream-message-input>
25-
</stream-channel>
26-
</div>
15+
Create the template (for example in your `AppComponent`):
2716

17+
```html
2818
<ng-template #mentionTemplate let-user="user">
2919
<b>@{{ user.name || user.id }}</b>
3020
</ng-template>
3121
```
3222

33-
The `MessageList` component will provide the mentioned user in a variable called `user`, the object has a [`UserResponse`](https://github.com/GetStream/stream-chat-js/blob/master/src/types.ts) type and you can use it to display information about the user.
23+
The `Message` component will provide the mentioned user in a variable called `user`, the object has a [`UserResponse`](https://github.com/GetStream/stream-chat-js/blob/master/src/types.ts) type and you can use it to display information about the user.
3424

3525
This template looks and works like the default mention template, however you can add interactions to this element.
3626

27+
Register the template in your TypeScript code (for example in your `AppComponent`):
28+
29+
```typescript
30+
import {
31+
AfterViewInit,
32+
Component,
33+
TemplateRef,
34+
ViewChild,
35+
} from "@angular/core";
36+
import {
37+
ChatClientService,
38+
ChannelService,
39+
StreamI18nService,
40+
} from "stream-chat-angular";
41+
import {
42+
CustomTemplatesService,
43+
MentionTemplateContext,
44+
} from "stream-chat-angular";
45+
import { environment } from "../environments/environment";
46+
47+
@Component({
48+
selector: "app-root",
49+
templateUrl: "./app.component.html",
50+
styleUrls: ["./app.component.scss"],
51+
})
52+
export class AppComponent implements AfterViewInit {
53+
@ViewChild("mentionTemplate")
54+
private mentionTemplate!: TemplateRef<MentionTemplateContext>;
55+
56+
constructor(
57+
private chatService: ChatClientService,
58+
private channelService: ChannelService,
59+
private streamI18nService: StreamI18nService,
60+
private customTemplatesService: CustomTemplatesService
61+
) {
62+
void this.chatService.init(
63+
environment.apiKey,
64+
environment.userId,
65+
environment.userToken
66+
);
67+
void this.channelService.init({
68+
type: "messaging",
69+
members: { $in: [environment.userId] },
70+
});
71+
this.streamI18nService.setTranslation();
72+
}
73+
74+
ngAfterViewInit(): void {
75+
this.customTemplatesService.mentionTemplate$.next(this.mentionTemplate);
76+
}
77+
}
78+
```
79+
3780
## Display user information on click
3881

3982
In this step we will create a popover with additional user information that will be displayed if the user clicks on a mention. We are using the [`ngx-popperjs`](https://www.npmjs.com/package/ngx-popperjs) library for the popover, but you can use a different library as well.

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
The `AvatarPlaceholder` component displays the [default avatar](./AvatarComponent.mdx) unless a [custom template](../services/CustomTemplatesService.mdx) is provided. This componet is used by the SDK internally, you likely won't need to use it.
2+
3+
[//]: # "Start of generated content"
4+
[//]: # "End of generated content"

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
The `IconPlaceholder` component displays the [default icons](./IconComponent.mdx) unless a [custom template](../services/CustomTemplatesService.mdx) is provided. This componet is used by the SDK internally, you likely won't need to use it.
2+
3+
[//]: # "Start of generated content"
4+
[//]: # "End of generated content"

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
The `LoadingInficatorPlaceholder` component displays the [default loading indicator](./LoadingIndicatorComponent.mdx) unless a [custom template](../services/CustomTemplatesService.mdx) is provided. This componet is used by the SDK internally, you likely won't need to use it.
2+
3+
[//]: # "Start of generated content"
4+
[//]: # "End of generated content"

0 commit comments

Comments
 (0)