microsoft · corinagum · Mar 14, 2019 · Mar 14, 2019 · Mar 14, 2019 · Mar 14, 2019
@@ -18,6 +18,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Fixed
+- Fix [#1423](https://github.com/Microsoft/BotFramework-WebChat/issues/1423). Added sample for hosting WebChat in Angular, by [@omarsourour](https://github.com/omarsourour) in PR [#1813](https://github.com/Microsoft/BotFramework-WebChat/pull/1813)
+
 ## [4.3.0] - 2019-03-04
 
 ### Added

@@ -218,7 +218,7 @@ npm run prepublishOnly
 | [`02.a.getting-started-minimal-bundle`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/02.a.getting-started-minimal-bundle)                                         | Introduces the minimized CDN with only basic dependencies. This does NOT include Adaptive Cards, Cognitive Services dependencies, or Markdown-It dependencies.                                                                      | [Minimal Bundle Demo](https://microsoft.github.io/BotFramework-WebChat/02.a.getting-started-minimal-bundle)          |
 | [`02.b.getting-started-minimal-markdown`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/02.b.getting-started-minimal-markdown)                                     | Demonstrates how to add the CDN for Markdown-It dependency on top of the minimal bundle.                                                                                                                                            | [Minimal with Markdown Demo](https://microsoft.github.io/BotFramework-WebChat/02.b.getting-started-minimal-markdown) |
 | [`03.a.host-with-react`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/03.a.host-with-react)                                                                       | Demonstrates how to create a React component that hosts the full-featured Web Chat.                                                                                                                                                 | [Host with React Demo](https://microsoft.github.io/BotFramework-WebChat/03.a.host-with-react)                        |
-| [`03.b.host-with-Angular5`](https://github.com/Microsoft/BotFramework-WebChat/issues/1423)                                                                                                 | Demonstrates how to create an Angular component that hosts the full-featured Web Chat.                                                                                                                                              |                                                                                                                      |
+| [`03.b.host-with-Angular`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/03.b.host-with-angular)                                                                   | Demonstrates how to create an Angular component that hosts the full-featured Web Chat.                                                                                                                                              | [Host with Angular Demo](https://stackblitz.com/github/omarsourour/ng-webchat-example)                               |
 | [`04.a.display-user-bot-initials-styling`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/04.a.display-user-bot-initials-styling)                                   | Demonstrates how to display initials for both Web Chat participants.                                                                                                                                                                | [Bot initials Demo](https://github.com/Microsoft/BotFramework-WebChat/blob/master/samples/04.a.display-user-bot-initials-styling/)|
 | [`04.b.display-user-bot-images-styling`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/04.b.display-user-bot-images-styling)                                       | Demonstrates how to display images and initials for both Web Chat participants.                                                                                                                                                     | [User images Demo](https://microsoft.github.io/BotFramework-WebChat/04.b.display-user-bot-images-styling)            |
 | [`05.a.branding-webchat-styling`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/05.a.branding-webchat-styling)                                                     | Introduces the ability to style Web Chat to match your brand. This method of custom styling will not break upon Web Chat updates.                                                                                                   | [Branding Web Chat Demo](https://microsoft.github.io/BotFramework-WebChat/05.a.branding-webchat-styling)             |

@@ -0,0 +1,82 @@
+# Sample - Integrating Web Chat using Angular 6+
+
+> This is a great sample for first-time Web Chat users.
+
+A simple web page with a WebChat in a flex-box maximized sidebar hosted using Angular.
+
+# Test out the hosted sample
+
+[Try out the Angular sample code here](https://stackblitz.com/github/omarsourour/ng-webchat-example)
+
+# How to run locally
+
+- Fork the [repository containing the sample code.](https://github.com/omarsourour/ng-webchat-example)
+- Follow the README.md in the forked repo.
+
+# Code
+
+> The completed code can be found in the [sample repo.](https://github.com/omarsourour/ng-webchat-example)
+
+## Goals of this sample
+
+The sample repo has three main goals
+
+- Import WebChat into our Angular application.
+  - The manner in which the library is imported differs between Angular versions. Check the `CHANGELOG.md` file in the [sample repo](https://github.com/omarsourour/ng-webchat-example) for more information.
+- Create a WebChat container in a component template file.
+- Attach template container to a directline instance.
+
+We'll start by adding the CDN to the head of our Angular application's `index.html` template.
+
+`index.html`
+
+```diff
+…
+<head>
++  <script src="https://cdn.botframework.com/botframework-webchat/master/webchat.js"></script>
+</head>
+…
+```
+
+> For demonstration purposes, we are using the development branch of Web Chat at "/master/webchat.js". When you are using Web Chat for production, you should use the latest stable release at "/latest/webchat.js", or lock down on a specific version with the following format: "/4.1.0/webchat.js".
+
+To create a WebChat container, create an empty `div` in the component's template file and assign it a template variable to reference it from this component's `.ts` file.
+
+`app.component.html`
+
+```diff
+...
++ <div class="webchat-container" #botWindow></div>
+...
+```
+
+Create a directline instance and attach it to the WebChat container via Angular's `ViewChild` construct.
+
+`app.component.ts`
+
+```ts
+@ViewChild("botWindow") botWindowElement: ElementRef;
+
+public ngOnInit(): void {
+  const directLine = window.WebChat.createDirectLine({
+    secret: "<YourSecretHere>",
+    webSocket: false
+  });
+
+  window.WebChat.renderWebChat(
+      {
+          directLine: directLine,
+          userID: "USER_ID"
+      },
+      this.botWindowElement.nativeElement
+  );
+}
+```
+
+> It is **never recommended** to put the Direct Line secret in the browser or client app. To learn more about secrets and tokens for Direct Line, visit [this tutorial on authentication](https://docs.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-direct-line-3-0-authentication).
+
+# Further reading
+
+## Full list of Web Chat hosted samples
+
+View the list of [available Web Chat samples](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples)
@@ -14,7 +14,7 @@ Here you can find all hosted samples of [Web Chat](https://github.com/Microsoft/
 | [`02.a.getting-started-minimal-bundle`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/02.a.getting-started-minimal-bundle)                                         | Introduces the minimized CDN with only basic dependencies. This does NOT include Adaptive Cards, Cognitive Services dependencies, or Markdown-It dependencies.                                                                      | [Minimal Bundle Demo](https://microsoft.github.io/BotFramework-WebChat/02.a.getting-started-minimal-bundle)          |
 | [`02.b.getting-started-minimal-markdown`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/02.b.getting-started-minimal-markdown)                                     | Demonstrates how to add the CDN for Markdown-It dependency on top of the minimal bundle.                                                                                                                                            | [Minimal with Markdown Demo](https://microsoft.github.io/BotFramework-WebChat/02.b.getting-started-minimal-markdown) |
 | [`03.a.host-with-react`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/03.a.host-with-react)                                                                       | Demonstrates how to create a React component that hosts the full-featured Web Chat.                                                                                                                                                 | [Host with React Demo](https://microsoft.github.io/BotFramework-WebChat/03.a.host-with-react)                        |
-| [`03.b.host-with-Angular5`](https://github.com/Microsoft/BotFramework-WebChat/issues/1423)                                                                                                 | Demonstrates how to create an Angular component that hosts the full-featured Web Chat.                                                                                                                                              |                                                                                                                      |
+| [`03.b.host-with-Angular`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/03.b.host-with-angular)                                                                   | Demonstrates how to create an Angular component that hosts the full-featured Web Chat.                                                                                                                                              | [Host with Angular Demo](https://stackblitz.com/github/omarsourour/ng-webchat-example)                               |
 | [`04.a.display-user-bot-initials-styling`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/04.a.display-user-bot-initials-styling)                                   | Demonstrates how to display initials for both Web Chat participants.                                                                                                                                                                | [Bot initials Demo](https://github.com/Microsoft/BotFramework-WebChat/blob/master/samples/04.a.display-user-bot-initials-styling/)|
 | [`04.b.display-user-bot-images-styling`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/04.b.display-user-bot-images-styling)                                       | Demonstrates how to display images and initials for both Web Chat participants.                                                                                                                                                     | [User images Demo](https://microsoft.github.io/BotFramework-WebChat/04.b.display-user-bot-images-styling)            |
 | [`05.a.branding-webchat-styling`](https://github.com/Microsoft/BotFramework-WebChat/tree/master/samples/05.a.branding-webchat-styling)                                                     | Introduces the ability to style Web Chat to match your brand. This method of custom styling will not break upon Web Chat updates.                                                                                                   | [Branding Web Chat Demo](https://microsoft.github.io/BotFramework-WebChat/05.a.branding-webchat-styling)             |