@arlioz/flagship-angular-legacy

Official Angular SDK for FlagShip — legacy support for Angular 10 to 15.

For Angular 16+, use @arlioz/flagship-angular which includes Signal support, standalone components, and functional guards.

Installation

npm install @arlioz/flagship @arlioz/flagship-angular-legacy

Setup

// app.module.ts
import { FlagShipModule } from '@arlioz/flagship-angular-legacy'

@NgModule({
  imports: [
    FlagShipModule.forRoot({
      apiKey: 'flg_production_...',
      baseUrl: 'https://api.flagship.dev/api',
    }),
  ],
})
export class AppModule {}

Usage

RxJS API

import { Component } from '@angular/core'
import { FlagShipService } from '@arlioz/flagship-angular-legacy'

@Component({
  selector: 'app-feature',
  template: `
    <div *ngIf="darkMode$ | async">Dark mode is enabled!</div>
    <p>Welcome: {{ welcomeMsg$ | async }}</p>
  `,
})
export class FeatureComponent {
  constructor(private flagship: FlagShipService) {}

  darkMode$ = this.flagship.getFlag('dark-mode', false)
  welcomeMsg$ = this.flagship.getFlag('welcome-message', 'Hello!')
}

Structural Directive

<div *ifFlag="'beta-feature'; else fallback">Welcome to the beta!</div>
<ng-template #fallback>
  <p>This feature is coming soon.</p>
</ng-template>

Pipe

<h1>{{ 'welcome-message' | flagValue:'Hello, World!' }}</h1>

Route Guard

Use FlagShipGuard with route data to protect routes behind feature flags:

import { FlagShipGuard } from '@arlioz/flagship-angular-legacy'

const routes: Routes = [
  {
    path: 'beta-dashboard',
    component: BetaDashboardComponent,
    canActivate: [FlagShipGuard],
    data: { flagKey: 'beta-dashboard', redirectTo: '/home' },
  },
]

User Targeting

@Component({
  /* ... */
})
export class AppComponent {
  constructor(private flagship: FlagShipService) {}

  async onLogin(user: { id: string; plan: string }) {
    await this.flagship.identify(user.id, { plan: user.plan })
  }
}

API Reference

FlagShipService

| Method | Return | Description | | --------------------------------------- | --------------------------------- | --------------------------------------- | | getFlag<T>(key, defaultValue) | Observable<T> | Single flag value, emits only on change | | getFlags() | Observable<Record<string, any>> | All flag values | | getFlagSnapshot<T>(key, defaultValue) | T | Synchronous read from cache | | identify(userId, attributes?) | Promise<void> | Update user context and re-fetch flags |

IfFlagDirective

<div *ifFlag="'flag-key'">Shown when flag is true</div>
<div *ifFlag="'flag-key'; else other">With else template</div>

FlagValuePipe

{{ 'flag-key' | flagValue:'default value' }}

FlagShipGuard

Class-based CanActivate guard. Configure via route data:

| Data property | Type | Default | Description | | ------------- | -------- | ------- | ---------------------------------- | | flagKey | string | — | Feature flag key to check | | redirectTo | string | '/' | Redirect URL when flag is disabled |

Compatibility

| Angular | Status | | ------- | --------- | | 10.x | Supported | | 11.x | Supported | | 12.x | Supported | | 13.x | Supported | | 14.x | Supported | | 15.x | Supported |

Migrating to @arlioz/flagship-angular

When upgrading to Angular 16+, switch to @arlioz/flagship-angular for:

• Signal API — flag() and flags() for zoneless change detection
• Standalone components — provideFlagShip() without NgModule
• Functional guards — flagGuard() instead of class-based FlagShipGuard

License

MIT