> ## Documentation Index
> Fetch the complete documentation index at: https://www.text.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Angular Adapter

> Check the library which allows rendering and interacting with the chat widget inside an Angular application.

This library lets you easily add [chat widget functionality](https://platform.text.com/open-chat-widget) to your [Angular](http://angular.io/) application.

## Installation

### Using npm

```bash theme={null}
npm install @livechat/widget-angular
```

### Using a script tag

```js theme={null}
<script src="http://unpkg.com/@livechat/widget-core@1.4.0"></script>
<script src="https://unpkg.com/@livechat/widget-angular@1.4.0"></script>
```

## Usage

Use the `text-widget` component and provide your `organizationId`:

```js theme={null}
// app.module.ts

import { NgModule } from "@angular/core";
import { LiveChatWidgetModule } from "@livechat/widget-angular";

@NgModule({
  /* ... */
  imports: [LiveChatWidgetModule],
})
export class AppModule {}
```

```js theme={null}
// app.component.ts

import { Component } from "@angular/core"
import { EventHandlerPayload } from "@livechat/widget-angular"

@Component({
  /* ... */
  templateUrl: './app.component.html',
})
export class AppComponent {
  handleNewEvent(event: EventHandlerPayload<"onNewEvent">) {
    console.log("TextWidget.onNewEvent", event)
  }
}
```

```html theme={null}
<!-- app.component.html -->
<text-widget
  organizationId="614fe72f-3319-43c6-9ae6-c410c65df230"
  visibility="maximized"
  (onNewEvent)="handleNewEvent($event)"
></text-widget>
```

### Assignable properties

#### Config data

All properties described below are used for initialization on the first render and later updates of the chat widget with new values on change.

| Prop                      | Type                                   |
| ------------------------- | -------------------------------------- |
| license \| organizationId | string (required)                      |
| group                     | string                                 |
| customerName              | string                                 |
| customerEmail             | string                                 |
| chatBetweenGroups         | boolean                                |
| sessionVariables          | `Record<string, string>`               |
| visibility                | 'maximized' \| 'minimized' \| 'hidden' |

#### Event handlers

All event handlers listed below are registered if provided for the first time. They unregister on the component cleanup or the property value change. Descriptions of all events are available after clicking on the associated links.

* [onReady](https://platform.text.com/docs/extending-chat-widget/javascript-api#on-ready)
* [onAvailabilityChanged](https://platform.text.com/docs/extending-chat-widget/javascript-api#on-availability-changed)
* [onVisibilityChanged](https://platform.text.com/docs/extending-chat-widget/javascript-api#on-visibility-changed)
* [onCustomerStatusChanged](https://platform.text.com/docs/extending-chat-widget/javascript-api#on-customer-status-changed)
* [onNewEvent](https://platform.text.com/docs/extending-chat-widget/javascript-api#on-new-event)
* [onFormSubmitted](https://platform.text.com/docs/extending-chat-widget/javascript-api#on-form-submitted)
* [onRatingSubmitted](https://platform.text.com/docs/extending-chat-widget/javascript-api#on-rating-submitted)
* [onGreetingDisplayed](https://platform.text.com/docs/extending-chat-widget/javascript-api#on-greeting-displayed)
* [onGreetingHidden](https://platform.text.com/docs/extending-chat-widget/javascript-api#on-greeting-hidden)
* [onRichMessageButtonClicked](https://platform.text.com/docs/extending-chat-widget/javascript-api#on-rich-message-button-clicked)

### Services

The `LiveChatWidgetModule`, exported from this package, registers a set of injectable services. All of them expose a subscribable [BehaviorSubject](https://rxjs.dev/api/index/class/BehaviorSubject) instance. It allows for consuming reactive data from the chat widget in any place of the application, as long as the `LiveChatWidget` or `TextWidget` component is rendered in the tree.

#### WidgetStateService

Access the current chat widget `availability` or `visibility` state if the chat widget is loaded.

```js theme={null}
// app.component.ts

import { Component, OnInit } from "@angular/core";
import {
  WidgetStateService,
  WidgetStateSubject,
} from "@livechat/widget-angular";

@Component({
  /* ... */
  templateUrl: "./app.component.html",
})
export class AppComponent implements OnInit {
  widgetState$: WidgetStateSubject;

  constructor(widgetStateService: WidgetStateService) {
    this.widgetState$ = widgetStateService.subject;
  }

  ngOnInit() {
    this.widgetState$.subscribe((widgetState) => {
      console.log("AppComponent.ngOnInit.widgetState", widgetState);
    });
  }
}
```

```js theme={null}
<!-- app.component.html -->

<div *ngIf="widgetState$ | async as widgetState">
  <div>{{ widgetState.availability }}</div>
  <div>{{ widgetState.visibility }}</div>
</div>
```

#### WidgetIsReadyService

Check if the chat widget is ready using the boolean flag `isWidgetReady`.

```js theme={null}
// app.component.ts

import { Component, OnInit } from "@angular/core";
import {
  WidgetIsReadyService,
  WidgetIsReadySubject,
} from "@livechat/widget-angular";

@Component({
  /* ... */
  templateUrl: "./app.component.html",
})
export class AppComponent implements OnInit {
  widgetIsReady$: WidgetIsReadySubject;

  constructor(widgetIsReadyService: WidgetIsReadyService) {
    this.widgetIsReady$ = widgetIsReadyService.subject;
  }

  ngOnInit() {
    this.widgetIsReady$.subscribe((widgetIsReady) => {
      console.log("AppComponent.ngOnInit.widgetIsReady", widgetIsReady);
    });
  }
}
```

```js theme={null}
<!-- app.component.html -->

<div>{{ widgetIsReady$ | async }}</div>
```

#### WidgetChatDataService

Access the `chatId` and `threadId` of the chat if there's one currently available.

```js theme={null}
// app.component.ts

import { Component, OnInit } from "@angular/core";
import {
  WidgetChatDataService,
  WidgetChatDataSubject,
} from "@livechat/widget-angular";

@Component({
  /* ... */
  templateUrl: "./app.component.html",
})
export class AppComponent implements OnInit {
  chatData$: WidgetChatDataSubject;

  constructor(chatDataService: WidgetChatDataService) {
    this.chatData$ = chatDataService.subject;
  }

  ngOnInit() {
    this.chatData$.subscribe((chatData) => {
      console.log("AppComponent.ngOnInit.chatData", chatData);
    });
  }
}
```

```js theme={null}
<!-- app.component.html -->

<div *ngIf="chatData$ | async as chatData">
  <div>{{ chatData.availability }}</div>
  <div>{{ chatData.visibility }}</div>
</div>
```

#### WidgetGreetingService

Access the current greeting `id` and `uniqueId` if one is currently displayed (received and not hidden).

```js theme={null}
// app.component.ts

import { Component, OnInit } from "@angular/core";
import {
  WidgetGreetingService,
  WidgetGreetingSubject,
} from "@livechat/widget-angular";

@Component({
  /* ... */
  templateUrl: "./app.component.html",
})
export class AppComponent implements OnInit {
  greeting$: WidgetGreetingSubject;

  constructor(greetingService: WidgetGreetingService) {
    this.greeting$ = greetingService.subject;
  }

  ngOnInit() {
    this.greeting$.subscribe((greeting) => {
      console.log("AppComponent.ngOnInit.greeting", greeting);
    });
  }
}
```

```js theme={null}
<!-- app.component.html -->

<div *ngIf="greeting$ | async as greeting">
  <div>{{ greeting.availability }}</div>
  <div>{{ greeting.visibility }}</div>
</div>
```

#### WidgetCustomerDataService

Access the `id`, `isReturning`, `status`, and `sessionVariables` of the current customer if the chat widget is loaded.

```js theme={null}
// app.component.ts

import { Component, OnInit } from "@angular/core";
import {
  WidgetCustomerDataService,
  WidgetCustomerDataSubject,
} from "@livechat/widget-angular";

@Component({
  /* ... */
  templateUrl: "./app.component.html",
})
export class AppComponent implements OnInit {
  customerData$: WidgetCustomerDataSubject;

  constructor(customerDataService: WidgetCustomerDataService) {
    this.customerData$ = customerDataService.subject;
  }

  ngOnInit() {
    this.customerData$.subscribe((customerData) => {
      console.log("AppComponent.ngOnInit.customerData", customerData);
    });
  }
}
```

```js theme={null}
<!-- app.component.html -->

<div *ngIf="customerData$ | async as customerData">
  <div>{{ customerData.id }}</div>
  <div>{{ customerData.isReturning }}</div>
  <div>{{ customerData.status }}</div>
  <ul>
    <li *ngFor="let variable of customerData.sessionVariables | keyvalue">
      {{ variable.value }}
    </li>
  </ul>
</div>
```