Draft - Framework integration

docs/001_develop/03_client-capabilities/022_framework-integration/002_integration-angular.mdx

@@ -279,7 +279,6 @@ This example shows how you can use the slots in the Modal component
 
 ```typescript
 import { AfterViewInit, Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, ViewChild } from '@angular/core';
-import { FormsModule } from '@angular/forms';
 
 @Component({
 selector: 'modal-example',
@@ -296,7 +295,6 @@ template: `
   `,
   standalone: true,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  imports: [FormsModule],
 })
 export class ModalExampleComponent implements AfterViewInit {
   @ViewChild('modal') modalRef!: ElementRef;
@@ -310,6 +308,71 @@ export class ModalExampleComponent implements AfterViewInit {
 }
 ```
 
+## Dependency Injection
+
+Foundation UI has a suite of services that can be added to your application via dependency injection.
+
+If you want to use the Connect service, the best approach is to create an injection token and register it in your app module.
+
+**connect-service.ts**
+
+```ts
+import { Connect, getConnect } from '@genesislcap/foundation-comms';
+import { InjectionToken } from '@angular/core';
+
+export const connectService = getConnect();
+export const CONNECT_TOKEN = new InjectionToken<Connect>('Logger');
+```
+
+**app.module.ts**
+```ts
+@NgModule({
+  ...
+  providers: [
+    { provide: CONNECT_TOKEN, useValue: connectService },
+    ...
+  ],
+  ...
+})
+```
+
+**your-angular-component.ts**
+
+After adding the connect service to your module providers using an injection token, you can add it to any class using Angular DI.
+
+This component will use the Connect `snapshot` method to retrieve data from a dataserver query `ALL_TRADES` and render it in a list.
+
+```typescript
+import { OnInit, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgForOf } from '@angular/common';
+import { Connect } from '@genesislcap/foundation-comms';
+import { CONNECT_TOKEN } from 'path/to/connect.service';
+
+@Component({
+selector: 'di-example',
+  template: `
+      <ul>
+        <li *ngFor="let item of data">Direction: {{item.TRADE_ID}} Quantity: {{item.QUANTITY}} Ticker: {{item.TICKER}}</li>
+      </ul>`,
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  imports: [ NgForOf ],
+
+})
+export class DIExampleComponent implements OnInit {
+  constructor(@Inject(CONNECT_TOKEN) private connect: Connect) {}
+
+  async ngOnInit() {
+    const response = await this.connect.snapshot('ALL_TRADES')
+
+    if (response.ROW?.length) {
+      this.data = response.ROW;
+    }
+  }
+}
+```
+
+
 ### Design tokens
 
 Design tokens are declared in the **src/styles/design-tokens.json** file. They offer an effective way to manage and apply styles in your application in a consistent and maintainable manner.

docs/001_develop/03_client-capabilities/022_framework-integration/003_integration-react.mdx

@@ -272,6 +272,76 @@ export function MyComponent() {
 }
 ```
 
+## Dependency Injection
+
+Foundation UI has a suite of services that can be added to your application via dependency injection.
+
+If you want to use the Connect service, the best approach is to create a class to resolve the dependency injection boilerplate and export it.
+
+**connect-service.ts**
+```ts
+import { DI } from '@microsoft/fast-foundation';
+import { Connect } from '@genesislcap/foundation-comms';
+import { API_DATA } from '../config';
+
+class ConnectService {
+  private container = DI.getOrCreateDOMContainer();
+  private connect: Connect = this.container.get(Connect);
+
+  getContainer() {
+    return this.container;
+  }
+
+  getConnect() {
+    return this.connect;
+  }
+
+  isConnected() {
+    return this.connect.isConnected;
+  }
+
+  init() {
+    return this.connect.connect(API_DATA.URL);
+  }
+}
+
+export const connectService = new ConnectService();
+```
+
+**your-react-component.ts**
+
+This component will use the Connect `snapshot` method to retrieve data from a dataserver query `ALL_TRADES` and render it in a list.
+
+```ts
+import React, { useState, useEffect } from 'react';
+import { connectService } from './connect.service'; // your file location
+
+export function YourReactComponent {
+
+  const [data, setData] = useState([]);
+
+  useEffect(() => {
+      const getData = async () => {
+        const response = await connectService.getConnect().snapshot('ALL_TRADES')
+
+        if (response.ROW?.length) {
+          setData(response.ROW);
+        }
+      }
+
+      getData();
+  }, []);
+
+  return (
+    <ul>
+      {data.map((item) => (
+        <li>Direction: {item.DIRECTION} Quantity: {item.QUANTITY} Ticker: {item.TICKER}</li>
+      ))}
+    </ul>
+  );
+}
+```
+
 ### Design tokens
 
 Design tokens are declared in the **src/styles/design-tokens.json** file. They offer an effective way to manage and apply styles in your application in a consistent and maintainable manner.