Angular CLI

npm install @avsbhq/angular

export const environment = {  production: false,  avsbSdkKey: 'sdk_development_xxxxxxxxxxxxxxxx',}

import type { ApplicationConfig } from '@angular/core'import { provideRouter } from '@angular/router'import { provideAvsb } from '@avsbhq/angular'import { environment } from '../environments/environment'import { routes } from './app.routes'export const appConfig: ApplicationConfig = {  providers: [    provideRouter(routes),    provideAvsb({      sdkKey: environment.avsbSdkKey,      context: { kind: 'user', key: 'anonymous' },    }),  ],}

// docs-example: not typechecked here, because an Angular component is compiled// by the Angular compiler under experimentalDecorators, which the standalone// TypeScript program this documentation gate builds does not enable.import { Component } from '@angular/core'import type { Signal } from '@angular/core'import { avsbBoolFlagSignal, AVSB_TEMPLATE_FEATURES } from '@avsbhq/angular'import type { Flag } from '@avsbhq/angular'@Component({  selector: 'app-checkout',  standalone: true,  imports: [AVSB_TEMPLATE_FEATURES],  template: `    @if (checkout().isEnabled()) {      <app-new-checkout avsbExposure="checkout_v2" />    } @else {      <app-legacy-checkout />    }  `,})export class CheckoutComponent {  readonly checkout: Signal<Flag<boolean>> = avsbBoolFlagSignal('checkout_v2', false)}

import type { Signal } from '@angular/core'import type { Observable } from 'rxjs'import {  avsbStringFlagSignal,  avsbFlagValueSignal,  avsbBoolFlag$,  avsbFlagValue$,} from '@avsbhq/angular'import type { Flag } from '@avsbhq/angular'// Every helper below resolves AvsbService through the current injector, so call// this from a field initializer, a constructor, or runInInjectionContext().function readsInsideAnInjectionContext(): void {  const hero: Signal<Flag<string>> = avsbStringFlagSignal('homepage_hero', 'control')  const heroValue: Signal<string> = avsbFlagValueSignal('homepage_hero', 'control')  const checkout$: Observable<Flag<boolean>> = avsbBoolFlag$('checkout_v2', false)  const checkoutValue$: Observable<boolean> = avsbFlagValue$('checkout_v2', false)}

import type { Observable } from 'rxjs'import type { AvsbService, Flag } from '@avsbhq/angular'function readsAnywhere(avsb: AvsbService): void {  // Observables and snapshot() are safe anywhere.  const hero$: Observable<Flag<string>> = avsb.getStringFlag('homepage_hero', 'control')  const now: Flag<boolean> = avsb.snapshot('checkout_v2', false)  // Each observable emits the current value on subscribe, then once per change  // to that flag. It never errors and never completes.}

<!-- the flag is on for this visitor --><section *avsbFlag="'new-dashboard'">...</section><!-- with a fallback branch --><section *avsbFlag="'new-dashboard'; else legacyDashboard">...</section><ng-template #legacyDashboard>...</ng-template><!-- one variation of a multivariate flag, by variation key --><section *avsbFlag="'hero'; default: 'control'; whenVariation: 'variant-a'">...</section><!-- or by the value that variation carries --><section *avsbFlag="'hero'; default: 'control'; whenValue: 'blue'">...</section><!-- record the exposure when this branch is shown --><section *avsbFlag="'new-dashboard'; exposure: true">...</section>

<h1>{{ 'homepage_hero' | avsbFlag: 'Welcome' }}</h1>@let state = 'checkout_v2' | avsbFlagState: false;@if (state.source === 'not_ready') {  <app-skeleton />} @else if (state.isEnabled()) {  <app-new-checkout />}

import type { Flag, EvaluationSource, RuleType } from '@avsbhq/angular'function formatFlag(flag: Flag<boolean>): string {  const value: boolean = flag.value  const variationKey: string | null = flag.variationKey  const source: EvaluationSource = flag.source  const ruleId: string | null = flag.ruleId  const ruleType: RuleType | null = flag.ruleType  const reasons: string[] = flag.reasons  return `${String(value)} from ${source} (${variationKey ?? 'no variation'}) ${reasons.join(', ')}`}

import type { AvsbService } from '@avsbhq/angular'function showVariation(avsb: AvsbService): () => void {  // Called before the SDK is ready, recordExposure waits for the first datafile  // and records then. It returns a cancel function for that wait, which the  // avsbExposure directive calls if the element is destroyed first: a visitor  // who never saw the variation should not appear in the results.  return avsb.recordExposure('checkout_v2')}

import type { AvsbService } from '@avsbhq/angular'function onSignIn(avsb: AvsbService, userId: string, anonymousId: string): void {  avsb.identify({ kind: 'user', key: userId, plan: 'pro', country: 'GB' })  avsb.alias({ kind: 'user', key: anonymousId }, { kind: 'user', key: userId })}function onSignOut(avsb: AvsbService): void {  avsb.reset()}function onCheckout(avsb: AvsbService, amount: number): void {  avsb.track('checkout_clicked')  avsb.track('purchase_completed', {    value: amount,    properties: { currency: 'GBP', productId: 'prod_123' },  })}

import type { AvsbService } from '@avsbhq/angular'function identifyAccount(avsb: AvsbService, userId: string, orgId: string): void {  avsb.identify({    kind: 'multi',    user: { kind: 'user', key: userId, plan: 'pro' },    organization: { kind: 'organization', key: orgId, tier: 'enterprise' },  })}

import type { Signal } from '@angular/core'import type { AvsbService, AvsbStatus, InitResult } from '@avsbhq/angular'function surfaces(avsb: AvsbService): { status: Signal<AvsbStatus>; error: Signal<Error | null> } {  return { status: avsb.status, error: avsb.error }}async function waitOnce(avsb: AvsbService): Promise<InitResult> {  // Resolves when the init attempt settles, and never rejects. The timeout  // bounds how long you wait, not what the SDK does: loading continues behind it.  return avsb.onReady({ timeout: 2000 })}

// docs-example: not typechecked here, because an Angular component is compiled// by the Angular compiler under experimentalDecorators, which the standalone// TypeScript program this documentation gate builds does not enable.import { Component, inject } from '@angular/core'import { AsyncPipe } from '@angular/common'import { AvsbService } from '@avsbhq/angular'import type { Flag } from '@avsbhq/angular'import type { Observable } from 'rxjs'@Component({  selector: 'app-hero',  standalone: true,  imports: [AsyncPipe],  template: `    @if (hero$ | async; as hero) {      @if (hero.value === 'variant-a') {        <app-hero-variant-a />      } @else {        <app-hero-control />      }    }  `,})export class HeroComponent {  private readonly avsb = inject(AvsbService)  readonly hero$: Observable<Flag<string>> = this.avsb.getStringFlag('homepage_hero', 'control')}

import { TestBed } from '@angular/core/testing'import { provideAvsb } from '@avsbhq/angular'import { createMockClient, flagsFromTestData, TestData } from '@avsbhq/test'import { CheckoutComponent } from './checkout.component'const client = createMockClient(  flagsFromTestData([    TestData.flag('checkout_v2')      .booleanFlag()      .variationForUser('u_paying', true)      .fallthroughVariation(false)      .build(),  ]),)TestBed.configureTestingModule({  imports: [CheckoutComponent],  providers: [provideAvsb({ client })],})// The mock records what your code asked for, so assertions are about decisions// rather than about rendered markup.client.identify({ kind: 'user', key: 'u_paying' })expect(client.getBoolFlag('checkout_v2', false).value).toBe(true)expect(client._evaluations()).toHaveLength(1)