npm package: @flagpole/angular
Description: Angular SDK for Flagpole feature flag management system
Author: Your Name
Latest version: 0.0.1

# 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

```bash
npm install @flagpole/angular socket.io-client
# or
yarn add @flagpole/angular socket.io-client
```

## Quick Start

### 1. Import the Module

```typescript
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

```html
<!-- 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

```typescript
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

```typescript
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

```typescript
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