Frequently Asked Questions

Date of slack thread: 4/12/24

Anonymous: Hi Statsig Team, We are currently integrating Statsig to manage a feature gate in our Angular application and have been unable to locate documentation detailing the integration process for Angular. Could you please direct us to any available resources or documentation that outlines how to incorporate Statsig with an Angular application? Thank you for your assistance.

Vijaye (Statsig): <@U01RAN2FKJP>; Statbot: Click below to mark as resolved.

tore (Statsig): We dont have any angular documentation at the moment, but I think it would end up looking something like this: (refer to js documentation as well)

1. After installing from npm or yarn, Create a service in Angular that will handle the initialization and provide methods to interact with Statsig:

// src/app/statsig.service.ts
import { Injectable } from '@angular/core';
import Statsig from 'statsig-js';

@Injectable({
  providedIn: 'root',
})
export class StatsigService {
  private initialized = false;

  async initializeStatsig() {
    await Statsig.initialize('client-sdk-key', {
      userID: 'some_user_id'
    }, {
      environment: { tier: 'staging' }  // optional configuration
    });
    this.initialized = true;
  }

  checkGate(gateName: string): boolean {
    if (!this.initialized) {
      console.error('Statsig has not been initialized');
      return false;
    }
    return Statsig.checkGate(gateName);
  }

  getConfig(configName: string) {
    if (!this.initialized) {
      console.error('Statsig has not been initialized');
      return null;
    }
    return Statsig.getConfig(configName);
  }

  // Additional methods like logEvent, getLayer, etc., can be added similarly
}

2. Ensure Statsig is initialized before the Angular application becomes interactive. Use Angular’s APP_INITIALIZER token:

// src/app/app.module.ts
import { NgModule, APP_INITIALIZER } from '@angular/core';
import { StatsigService } from './statsig.service';

export function initializeStatsig(statsigService: StatsigService) {
  return (): Promise<void> => {
    return statsigService.initializeStatsig();
  };
}

@NgModule({
  declarations: [
    // your components here
  ],
  imports: [
    // other modules here
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initializeStatsig,
      deps: [StatsigService],
      multi: true,
    },
  ],
  bootstrap: [/* your root component */]
})
export class AppModule { }

3. Now, you can inject the StatsigService into any of your Angular components and use it to check gates, get configurations, etc.

// src/app/your-component/your-component.component.ts
import { Component, OnInit } from '@angular/core';
import { StatsigService } from '../statsig.service';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {

  constructor(private statsigService: StatsigService) { }

  ngOnInit(): void {
    if (this.statsigService.checkGate('new_homepage_design')) {
      console.log('Feature is enabled');
    } else {
      console.log('Feature is disabled');
    }
  }
}

This will ensure that the sdk is initialized before your app is fully interactive, and makes an easy way to access statsig gates/experiments in your components.

Anonymous: <@U01RAN2FKJP>, Thank you for your assistance! I appreciate your help.

Statbot: This thread has been marked as resolved. Press below to re-open.