docs: Update code examples

Author: szuperaz

docusaurus/docs/Angular/basics/upgrade-v2.mdx

@@ -14,20 +14,6 @@ Below you can find the list of breaking changes and instructions on how to updat
 
 ## Peer dependencies
 
-### stream-chat-css
-
-You can drop the `@stream-io/stream-chat-css` dependency because going forward `stream-chat-angular` will encapsulate the library.
-
-Rewrite your stylesheet imports to this:
-
-`~stream-chat-angular/src/assets/styles/scss/index.scss`
-
-Or this if you were using CSS:
-
-`~stream-chat-angular/src/assets/styles/css/index.css`
-
-It's still possible to individually import stylesheets you just have to replace the `~@stream-io/stream-chat-css/dist` prefix with `~stream-chat-angular/src/assets/styles`.
-
 ### stream-chat
 
 Upgrade to stream-chat `^6.3.0`.
@@ -43,6 +29,36 @@ Our [generics guide](../concepts/generics.mdx) explains this topic in more detai
 
 You can find the full list of breaking changes in stream-chat [v5](https://github.com/GetStream/stream-chat-js/releases/tag/v5.0.0) and [v6](https://github.com/GetStream/stream-chat-js/releases/tag/v6.0.0) on GitHub.
 
+#### Angular 13
+
+Run the following command to updgrade if you're using Angular 13:
+
+```
+npm install [email protected] [email protected]
+```
+
+#### Angular 12
+
+Run the following command to updgrade if you're using Angular 12:
+
+```
+npm install [email protected] stream-chat-angular@3 --legacy-peer-deps
+```
+
+### stream-chat-css
+
+You can drop the `@stream-io/stream-chat-css` dependency because going forward `stream-chat-angular` will encapsulate the library.
+
+Rewrite your stylesheet imports to this:
+
+`~stream-chat-angular/src/assets/styles/scss/index.scss`
+
+Or this if you were using CSS:
+
+`~stream-chat-angular/src/assets/styles/css/index.css`
+
+It's still possible to individually import stylesheets you just have to replace the `~@stream-io/stream-chat-css/dist` prefix with `~stream-chat-angular/src/assets/styles`.
+
 ## Inputs removed in favor of channel capabilities
 
 The following inputs are removed:

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

@@ -209,7 +209,13 @@ Create the template (for example in your `AppComponent`):
 </ng-template>
 ```
 
-Register the template in your TypeScript code (for example in your `AppComponent`):
+Register the template in your TypeScript code (for example in your `AppComponent`).
+
+These are the necessary steps:
+
+- Create a reference to the custom template
+- Import the [CustomTemplatesService](../services/CustomTemplatesService.mdx)
+- Register your custom template
 
 ```typescript
 import {
@@ -235,14 +241,15 @@ import { environment } from "../environments/environment";
   styleUrls: ["./app.component.scss"],
 })
 export class AppComponent implements AfterViewInit {
+  // Create a reference to the custom template
   @ViewChild("channelActionsTemplate")
   private channelActionsTemplate!: TemplateRef<ChannelActionsContext>;
 
   constructor(
     private chatService: ChatClientService,
     private channelService: ChannelService,
     private streamI18nService: StreamI18nService,
-    private customTemplatesService: CustomTemplatesService
+    private customTemplatesService: CustomTemplatesService // Import customTemplatesService
   ) {
     void this.chatService.init(
       environment.apiKey,
@@ -257,6 +264,7 @@ export class AppComponent implements AfterViewInit {
   }
 
   ngAfterViewInit(): void {
+    // Register your custom template
     this.customTemplatesService.channelActionsTemplate$.next(
       this.channelActionsTemplate
     );
@@ -384,8 +392,7 @@ Add a reference to the template in your `app.component.ts`:
 
 ```typescript
 @ViewChild('inviteTemplate') private inviteTemplate!: TemplateRef<{
-  channel: Channel | ChannelResponse;
-}>;
+    channel: Channel<DefaultStreamChatGenerics> | ChannelResponse<DefaultStreamChatGenerics>;
 ```
 
 #### Displaying the invitations

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

@@ -162,7 +162,15 @@ Let's create the template for the emoji picker (for example in your `AppComponen
 </ng-template>
 ```
 
-Register the template in your TypeScript code (for example in your `AppComponent`):
+Register the template in your TypeScript code (for example in your `AppComponent`).
+
+These are the necessary steps:
+
+- Create a reference to the custom template
+- Import the [CustomTemplatesService](../services/CustomTemplatesService.mdx)
+- Register your custom template
+
+Here is an example file:
 
 ```typescript
 import {
@@ -188,14 +196,15 @@ import { environment } from "../environments/environment";
   styleUrls: ["./app.component.scss"],
 })
 export class AppComponent implements AfterViewInit {
+  // Create a reference to the custom template
   @ViewChild("emojiPickerTemplate")
   private emojiPickerTemplate!: TemplateRef<EmojiPickerContext>;
 
   constructor(
     private chatService: ChatClientService,
     private channelService: ChannelService,
     private streamI18nService: StreamI18nService,
-    private customTemplatesService: CustomTemplatesService
+    private customTemplatesService: CustomTemplatesService // Import the customTemplatesService
   ) {
     void this.chatService.init(
       environment.apiKey,
@@ -210,6 +219,7 @@ export class AppComponent implements AfterViewInit {
   }
 
   ngAfterViewInit(): void {
+    // Register your custom template
     this.customTemplatesService.emojiPickerTemplate$.next(
       this.emojiPickerTemplate
     );

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

@@ -24,7 +24,15 @@ The `Message` component will provide the mentioned user in a variable called `us
 
 This template looks and works like the default mention template, however you can add interactions to this element.
 
-Register the template in your TypeScript code (for example in your `AppComponent`):
+Register the template in your TypeScript code (for example in your `AppComponent`).
+
+These are the necessary steps:
+
+- Create a reference to the custom template
+- Import the [CustomTemplatesService](../services/CustomTemplatesService.mdx)
+- Register your custom template
+
+Here is an example file:
 
 ```typescript
 import {
@@ -50,14 +58,15 @@ import { environment } from "../environments/environment";
   styleUrls: ["./app.component.scss"],
 })
 export class AppComponent implements AfterViewInit {
+  // Create a reference to the custom template
   @ViewChild("mentionTemplate")
   private mentionTemplate!: TemplateRef<MentionTemplateContext>;
 
   constructor(
     private chatService: ChatClientService,
     private channelService: ChannelService,
     private streamI18nService: StreamI18nService,
-    private customTemplatesService: CustomTemplatesService
+    private customTemplatesService: CustomTemplatesService // Import the customTemplatesService
   ) {
     void this.chatService.init(
       environment.apiKey,
@@ -72,6 +81,7 @@ export class AppComponent implements AfterViewInit {
   }
 
   ngAfterViewInit(): void {
+    // Register your custom template
     this.customTemplatesService.mentionTemplate$.next(this.mentionTemplate);
   }
 }