Flagpole Angular SDK

Angular SDK for the Flagpole feature flag management system. Provides real-time feature flag updates, A/B testing capabilities, and seamless integration with Angular applications.

Installation

npm install @flagpole/angular socket.io-client
# or
yarn add @flagpole/angular socket.io-client

Quick Start

1. Import the Module

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FeatureFlagModule } from "@flagpole/angular";

import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    FeatureFlagModule.forRoot({
      apiKey: "your-api-key-here",
      environments: ["development", "staging"], // Optional
    }),
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

2. Use in Templates

<!-- Structural directive -->
<div *flagpoleFeature="'new-feature'">
  <h2>New Feature Content</h2>
</div>

<!-- With fallback -->
<div *flagpoleFeature="'beta-feature'; else oldFeature">
  <h2>Beta Feature</h2>
</div>
<ng-template #oldFeature>
  <h2>Old Feature</h2>
</ng-template>

<!-- Pipe usage -->
<button *ngIf="'premium-feature' | featureFlag">Premium Action</button>

3. Use in Components

import { Component, OnInit } from "@angular/core";
import { FeatureFlagService } from "@flagpole/angular";

@Component({
  selector: "app-example",
  template: `...`,
})
export class ExampleComponent implements OnInit {
  constructor(private featureFlagService: FeatureFlagService) {}

  ngOnInit(): void {
    // Check if feature is enabled
    if (this.featureFlagService.isFeatureEnabled("new-dashboard")) {
      console.log("New dashboard is enabled");
    }

    // Get flag details
    const flag = this.featureFlagService.getFlag("analytics");
    console.log("Flag details:", flag);
  }
}

4. Route Guards

import { FeatureFlagGuard } from "@flagpole/angular";

const routes: Routes = [
  {
    path: "beta-feature",
    component: BetaComponent,
    canActivate: [FeatureFlagGuard],
    data: {
      featureFlag: "beta-access",
      redirectTo: "/home", // Optional redirect
    },
  },
];

API Reference

FeatureFlagService

Methods

• isFeatureEnabled(flagName: string): boolean - Check if a feature flag is enabled
• getFlag(flagName: string): FeatureFlag | null - Get complete flag details
• getAllFlags(): Record<string, FeatureFlag> - Get all flags

Observables

• flags$: Observable<Record<string, FeatureFlag>> - All flags
• isLoading$: Observable<boolean> - Loading state
• error$: Observable<Error | null> - Error state

Directive

• *flagpoleFeature="'flag-name'" - Show/hide content based on flag
• *flagpoleFeature="'flag-name'; else template" - With fallback template

Pipe

• 'flag-name' | featureFlag - Returns boolean flag status

Guard

• FeatureFlagGuard - Protect routes based on feature flags

Configuration

interface FeatureFlagConfig {
  apiKey: string;
  environments?: Environment[]; // ['development', 'staging', 'production']
}

Features

• ✅ Real-time updates via WebSocket
• ✅ Environment-based flag filtering
• ✅ TypeScript support
• ✅ Angular 15+ compatibility
• ✅ Structural directives and pipes
• ✅ Route guards
• ✅ Error handling and loading states

Requirements

• Angular 15+
• RxJS 7.5+
• TypeScript 4.8+

License

MIT