npm package: @mbcrm/ftm-sdk-web
Description: A feature flag SDK for web applications
Author: haongcv
Latest version: 0.0.3

# 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:

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

3. **Install Dependencies**

   Run the following command to install the dependencies:

   ```sh
   npm install
   ```

## Usage

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

```typescript
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:

```typescript
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:

```typescript
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:

```typescript
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:

```typescript
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:

```typescript
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.