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.
npm install @flagpole/angular socket.io-client
# or
yarn add @flagpole/angular socket.io-clientimport { 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 {}<!-- 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>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);
}
}import { FeatureFlagGuard } from "@flagpole/angular";
const routes: Routes = [
{
path: "beta-feature",
component: BetaComponent,
canActivate: [FeatureFlagGuard],
data: {
featureFlag: "beta-access",
redirectTo: "/home", // Optional redirect
},
},
];-
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
-
flags$: Observable<Record<string, FeatureFlag>>- All flags -
isLoading$: Observable<boolean>- Loading state -
error$: Observable<Error | null>- Error state
-
*flagpoleFeature="'flag-name'"- Show/hide content based on flag -
*flagpoleFeature="'flag-name'; else template"- With fallback template
-
'flag-name' | featureFlag- Returns boolean flag status
-
FeatureFlagGuard- Protect routes based on feature flags
interface FeatureFlagConfig {
apiKey: string;
environments?: Environment[]; // ['development', 'staging', 'production']
}- ✅ 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
- Angular 15+
- RxJS 7.5+
- TypeScript 4.8+
MIT