Angular Feature Flags

3. Evaluate flags

// feature-flag.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { map, catchError, shareReplay } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class FeatureFlagService {
  private cache = new Map<string, Observable<boolean>>();
  private sdkKey = environment.flagbitSdkKey;

  constructor(private http: HttpClient) {}

  isEnabled(flagKey: string, context: Record<string, string> = {}): Observable<boolean> {
    const cacheKey = `${flagKey}:${JSON.stringify(context)}`;
    if (!this.cache.has(cacheKey)) {
      this.cache.set(cacheKey,
        this.http.post<{value: boolean}>(
          'https://flagbit.anethoth.com/api/v1/evaluate',
          { flag_key: flagKey, context },
          { headers: { 'X-SDK-Key': this.sdkKey } }
        ).pipe(
          map(r => r.value),
          catchError(() => of(false)),
          shareReplay(1)
        )
      );
    }
    return this.cache.get(cacheKey)!;
  }
}

// Structural directive — *featureFlag="'new-sidebar'"
@Directive({ selector: '[featureFlag]' })
export class FeatureFlagDirective implements OnInit {
  @Input() featureFlag!: string;
  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef,
    private flags: FeatureFlagService
  ) {}

  ngOnInit() {
    this.flags.isEnabled(this.featureFlag).subscribe(enabled => {
      this.viewContainer.clear();
      if (enabled) this.viewContainer.createEmbeddedView(this.templateRef);
    });
  }
}

// Route guard
@Injectable({ providedIn: 'root' })
export class FeatureGuard implements CanActivate {
  constructor(private flags: FeatureFlagService) {}

  canActivate(route: ActivatedRouteSnapshot): Observable<boolean> {
    const flagKey = route.data['featureFlag'];
    return this.flags.isEnabled(flagKey);
  }
}

// Route config
{ path: 'beta', component: BetaComponent, canActivate: [FeatureGuard],
  data: { featureFlag: 'beta-section' } }

// Template: <div *featureFlag="'new-widget'">New widget here</div>