SDK Feature Flag Client for Angular Web

This README provides an overview of the SDK Feature Flag Client for Angular Web applications. This client enables dynamic feature management through feature flags, allowing you to enable or disable specific features in your application without redeploying it.

Features

• Singleton Pattern: Ensures a single instance of the feature flag client is used throughout the application.
• Real-time Updates: Synchronizes feature flags using a server-side event stream.
• Feature Flag Evaluation: Checks if a specific feature is enabled or provides specific variants for a given feature.
• Context-based Flagging: Uses context data to personalize feature availability.

Installation

1. Configure the .npmrc File

   Create an .npmrc file in the root of your project with the following content:

   //10.1.12.177:8445/repository/npm-private/:_auth=ZXNiYWRtaW46ZXNiYWRtaW4=
   @mb:registry=http://10.1.12.177:8445/repository/npm-private/
   registry=https://registry.npmjs.org/

2. Add Package Dependency

   Add the package dependency to your package.json file:

   "@mb/ftm-sdk-web": "0.0.3"

3. Install Dependencies

   Run the following command to install the dependencies:

   npm install

Usage

Importing and Initialization

First, import the SDK into your Angular project and initialize it.

import { initialize, isFeatureEnabled, setContextData, getFeatureVariants, setSync } from '@mb/ftm-sdk-web';

// Initialize the FeatureFlagClient
initialize(
  'https://your-feature-service-url', // URL to your feature flag server
  'your_project_name',               // Project name
  'production',                      // Environment
  'your_application_name',           // Application name
  'your_auth_token'                  // Authorization token
).then(() => {
  console.log('Feature flag client initialized');
}).catch((error) => {
  console.error('Failed to initialize feature flag client', error);
});

// for example
initialize("http://10.1.27.43:10190", "crm-web", "dev", "crmcore-frontend-web", "dev:*-E26CD6F619C74ADC98671C03E1AA2977")
        .then(() => {
          console.log('Feature flag client initialized');
        }).catch((error) => {
        console.error('Failed to initialize feature flag client', error);
      });

Checking if a Feature is Enabled

To determine if a specific feature is enabled, use the isFeatureEnabled() method:

const featureName = 'new-dashboard';
const isEnabled = isFeatureEnabled(featureName, false);

if (isEnabled) {
  console.log('New Dashboard feature is enabled.');
} else {
  console.log('New Dashboard feature is not enabled.');
}

Setting and Getting Context Data

To set context data, such as user preferences or other identifying information, use the setContextData() method:

setContextData('userType', 'admin');

const userType = getContextData('userType');
console.log('User Type:', userType);

Retrieving Feature Variants

If a feature has multiple variants, you can retrieve them using the getFeatureVariants() method:

const variants = getFeatureVariants('theme-options');
if (variants) {
  variants.forEach((variant) => {
    console.log('Variant:', variant.name);
  });
}

Enabling or Disabling Synchronization

To enable or disable the synchronization of features in real-time, use the setSync() method:

setSync(true);

Observing Feature Data

The SDK provides an observable stream to watch for feature data changes. You can subscribe to featureData$ to receive updates whenever feature data changes:

import { featureData$ } from '@mb/ftm-sdk-web';

featureData$.subscribe((features) => {
  console.log('Feature data updated:', features);
});

API Reference

Methods

• initialize(url, projectName, env, application, auth): Initializes the feature flag client with server details and project information.
• isFeatureEnabled(feature, defaultValue): Returns true if the specified feature is enabled, otherwise returns false, in case the sdk haven't initlized or failed to init, the defaultValue is return.
• setContextData(key, value): Sets contextual data for feature flag evaluations.
• getContextData(key): Gets contextual data by key.
• getFeatureVariants(key): Retrieves available variants for a given feature.
• setSync(enableSync): Enables or disables real-time synchronization for features.