# @lia-labs/sdk-angular

> Angular signals for the Lia SDK. inject* functions for Lia's state, and buttons that live as long as the component. From the Lia developer docs: https://docs.lialabs.org/packages/angular

```sh
npm install @lia-labs/sdk @lia-labs/sdk-angular
```

Angular 17 or later. Everything from [`@lia-labs/sdk`](/packages/sdk) is re-exported. The `inject*` functions run in an injection context (a component's constructor or field initializers, or `runInInjectionContext`) and clean up when it's destroyed.

## An app

```ts
import { Component, effect } from '@angular/core';
import { injectBackButton, injectInit, injectLanguage, injectMainButton, isLia, mockLia, pay, ready } from '@lia-labs/sdk-angular';

if (!isLia()) mockLia();

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    @if (lia().status === 'ready') {
      <h1>Hello, &#64;{{ lia().result?.player?.name }} ({{ language() }})</h1>
    }
  `,
})
export class AppComponent {
  lia = injectInit();
  language = injectLanguage();
  mainButton = injectMainButton({ text: 'Buy extra lives', onClick: () => pay('extra-lives') });

  constructor() {
    effect(() => {
      if (this.lia().status === 'ready') ready();
    });
  }
}
```

## Functions

| Function | Gives you |
| --- | --- |
| `injectInit(options?)` | A signal of `{ status, result, error }`. Calls `init()` once. |
| `toLiaSignal(value)` | Any SDK value as a read-only signal. |
| `injectPlayer()`, `injectMode()`, `injectLanguage()`, `injectRtl()`, `injectColorScheme()`, `injectThemeParams()`, `injectViewport()`, `injectSafeArea()`, `injectContentSafeArea()`, `injectIsFullscreen()`, `injectStartParam()`, `injectSoundOn()`, `injectNotificationsAllowed()` | Lia's state as read-only signals. |
| `injectLiaEvent(event, handler)` | Listens to one of Lia's events. |
| `injectMainButton(options)`, `injectSecondaryButton(options)` | Shows the button for the component's life. Returns `{ update(options), dispose() }`. |
| `injectBackButton(onBack)`, `injectSettingsButton(onOpen)` | Shows the header button for the component's life. |
| `injectClosingConfirmation()`, `injectVerticalSwipesDisabled()` | For the component's life. |

To follow a signal, update the button in an effect:

```ts
busy = signal(false);
button = injectMainButton({ text: 'Buy', onClick: () => this.buy() });
constructor() {
  effect(() => this.button.update({ text: 'Buy', isProgressVisible: this.busy(), onClick: () => this.buy() }));
}
```