Angular SDK

The Feato Angular SDK provides access to feature flags inside Angular applications with first-class support for dependency injection and reactivity.

It integrates naturally with Angular applications and exposes both observable- and signal-based APIs.

Installation

Install the Feato Angular SDK using your preferred package manager.

npm install @feato/ng-client

The SDK supports the current and previous major versions of Angular.

Setup

The Feato client is configured at application bootstrap using a provider function.

Initialization happens automatically when the provider is registered. No manual lifecycle handling is required.

import { bootstrapApplication } from '@angular/platform-browser';
import { provideFeatoClient } from '@feato/ng-client';

bootstrapApplication(AppComponent, {
  providers: [
    provideFeatoClient({
      projectKey: 'YOUR_PROJECT_KEY',
      environment: 'prod',
    }),
  ],
});

Usage

Feature flags are accessed by injecting the FeatoClient.

The SDK exposes both observables and signals, allowing you to choose the reactive model that fits your application.

import { Component } from '@angular/core';
import { FeatoClient } from '@feato/ng-client';

@Component({...})
export class ExampleComponent {
  constructor(private feato: FeatoClient) {}

  // Observable API
  isEnabled$ = this.feato.flag$('new-dashboard');

  // Signal API
  isEnabled = this.feato.flag('new-dashboard');
}

• Observables for stream-based composition
• Signals for fine-grained reactivity
• Automatic updates when flags change

Route guards

The Angular SDK includes a route guard that allows navigation to be controlled by feature flags.

This makes it possible to protect routes or redirect users based on the current flag state.

import { Routes } from '@angular/router';
import { featoGuard } from '@feato/ng-client';

export const routes: Routes = [
  {
    path: 'new-dashboard',
    component: NewDashboardComponent,
    canActivate: [
      featoGuard('new-dashboard', {
        fallback: false,
        redirectTo: '/not-found',
      }),
    ],
  },
];

Route guards ensure that feature-gated routes remain inaccessible until explicitly enabled.

Examples

Common use cases for feature flags in Angular applications include:

• Conditionally rendering components
• Enabling or disabling routes
• Gradual rollout of new features

Use feature flags to control behavior and access, not to replace application structure.

Next steps

After integrating the Angular SDK, you may want to explore related topics:

• Concepts: Feature flag delivery
• React SDK
• Public API