@buildrflags/angular

Angular SDK for BuildrFlags feature flags.

Installation

npm install @buildrflags/angular
# or
pnpm add @buildrflags/angular
# or
yarn add @buildrflags/angular

Setup

Import BuildrFlagsModule in your root AppModule:

import { NgModule } from '@angular/core';
import { BuildrFlagsModule } from '@buildrflags/angular';

@NgModule({
  imports: [
    BuildrFlagsModule.forRoot({
      apiKey: 'bf_production_xxx',
      baseUrl: 'https://api.flags.buildrlab.com', // optional
      refreshInterval: 60000, // optional, default 60s
    }),
  ],
})
export class AppModule {}

Standalone Components

For standalone components, import the module directly:

import { Component } from '@angular/core';
import { BuildrFlagsModule } from '@buildrflags/angular';

@Component({
  standalone: true,
  imports: [BuildrFlagsModule],
  template: `
    <div *ifFlag="'features.newUI'">
      New UI enabled!
    </div>
  `,
})
export class MyComponent {}

Usage

Structural Directive

Use *ifFlag to conditionally render content:

<!-- Show when flag is enabled -->
<div *ifFlag="'features.darkMode'">
  Dark mode content
</div>

<!-- With else template -->
<div *ifFlag="'features.newDashboard'; else oldDashboard">
  New dashboard
</div>
<ng-template #oldDashboard>
  Old dashboard
</ng-template>

<!-- Negated (show when flag is OFF) -->
<div *ifFlag="'features.maintenance'; negate: true">
  Site is operational
</div>

Pipe

Use the flag pipe with async for reactive flag evaluation:

<!-- In *ngIf -->
<div *ngIf="'features.darkMode' | flag | async">
  Dark mode enabled
</div>

<!-- In attribute binding -->
<button [disabled]="!('features.submit' | flag | async)">
  Submit
</button>

<!-- In class binding -->
<div [class.dark-theme]="'features.darkMode' | flag | async">
  Content
</div>

Service

Inject BuildrFlagsService for programmatic access:

import { Component } from '@angular/core';
import { BuildrFlagsService } from '@buildrflags/angular';

@Component({
  selector: 'app-example',
  template: `
    <div *ngIf="darkMode$ | async">Dark mode!</div>
  `,
})
export class ExampleComponent {
  // Observable for reactive updates
  darkMode$ = this.flags.flag$('features.darkMode');

  constructor(private flags: BuildrFlagsService) {}

  // Snapshot value
  checkFlag() {
    const enabled = this.flags.getFlag('features.someFlag');
    console.log('Flag enabled:', enabled);
  }

  // Manual refresh
  async refreshFlags() {
    await this.flags.refresh();
  }
}

Service API

interface BuildrFlagsService {
  // Observables
  flags$: Observable<BuildrFlagsState>;     // Full state
  flag$(key: string, defaultValue?: boolean): Observable<boolean>;
  isLoading$: Observable<boolean>;
  error$: Observable<string | null>;

  // Snapshots
  snapshot: BuildrFlagsState;               // Current state
  getFlag(key: string, defaultValue?: boolean): boolean;
  isLoading: boolean;

  // Actions
  refresh(): Promise<void>;                 // Manual refresh
}

Configuration

| Option | Type | Default | Description | |--------|------|---------|-------------| | apiKey | string | required | Your BuildrFlags API key | | baseUrl | string | https://api.flags.buildrlab.com | API base URL | | refreshInterval | number | 60000 | Auto-refresh interval (ms), 0 to disable | | initialFlags | Record<string, boolean> | undefined | Initial flags for SSR |

Server-Side Rendering (SSR)

For SSR, provide initial flags to avoid flicker:

// In your SSR bootstrap
BuildrFlagsModule.forRoot({
  apiKey: 'bf_production_xxx',
  initialFlags: {
    'features.darkMode': true,
    'features.newUI': false,
  },
});

TypeScript

All types are exported:

import type {
  BuildrFlagsConfig,
  BuildrFlagsState,
  FlagResult,
} from '@buildrflags/angular';

Requirements

• Angular 17+
• RxJS 7+

License

MIT