@tryabby/angular

AbbyModule

The AbbyModule is an Angular module that provides a service and some directives to work with Abby. You can then use the AbbyService in your components or services to interact with the Abby platform. The AbbyFlag, AbbyTest and DevtoolsComponent directives can be used in your templates to show/hide content based on feature flags or AB tests.

Parameters

The AbbyModule.forRoot() method takes an object as a parameter. The object can contain the following properties:

properties

tests

The tests property is an object containing your defined A/B Tests. You probably want to use the Copy Button in your dashboard to copy the tests object. They keys of the object represent the names of your predefined A/B tests. The values are objects containing the following properties:

flags

The flags property is an array containing your defined Feature Flags. You probably want to use the Copy Button in your dashboard to copy the flags array.

Example

abby.config.ts

export const abby = {
  // ..your config
  tests: {
    test: {
      variants: ["control", "variant-a", "variant-b"],
    },
  },
  flags: ["test-flag"],
  remoteConfig: {
    remoteConfig1: "String",
    remoteConfig2: "Number",
    remoteConfig3: "JSON",
  },
};
 
@Injectable({
  providedIn: "root",
  useExisting: AbbyService,
})
export class Abby extends AbbyService<
  InferFlagNames<typeof abby>,
  InferTestNames<typeof abby>,
  InferTests<typeof abby>,
  InferRemoteConfig<typeof abby>,
  InferRemoteConfigName<typeof abby>
> {}

app.module.ts

import { AbbyModule } from "abby";
import { Abby, abby } from "./abby";
 
@NgModule({
  // your config
  imports: [
    // your imports
    AbbyModule.forRoot(abby),
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: (abby: Abby) => () => abby.init(),
      deps: [Abby],
      multi: true,
    },
  ],
})
export class AppModule {}

settings

The settings property is an object containing additional settings for Abby. The following properties are available:

• flags.defaultValue: Allows you to set a general default boolean value for each Feature Flag type.

  flags: {
    defaultValue: false,
  },

• flags.devOverrides: An object containing the values of feature flags in development mode. The keys of the object represent the names of the flags.

• remoteConfig.defaultValue: Allows you to set default values for the possible Remote Config types.

  remoteConfig: {
    defaultValues: {
      String: "",
      Number: 0,
      JSON: {},
    },
  },

• remoteConfig.devOverrides: An object containing the values of Remote Configuration variables in development mode. The keys of the object represent the names of the flags. The value must be assignable to the type of the variable.

AbbyService

• AbbyService is a angular service, which provides methods for getting

getVariant(testName: string, lookupObject?)

Resolves the selected variant for a given test name. Automatically maps the active variant to a custom value if lookupObject is provided.

Parameters

• testName: The name of the test, needs to be one of the defined tests.
• lookupObject: An optional lookup object to automatically map the active variant to a custom value.

Return Value

The variant of the test Type: string

Or the custom value from the lookupObject when provided

getFeatureFlagValue(flagName: string)

Resolves the value of a feature flag by the flagname.

Parameters

The name of the flag, needs to be one of the defined flags.

Return Value

The value of the flag Type: boolean

getRemoteConfig

getRemoteConfig is a function to access the value of a Remote Configuration variable. This can be called in a non-react scope (Regular Typescript, Edge Functions and API Routes)

Parameters

The name of the Remote Configuration variable, which needs to be one of the keys in your remoteConfig object in your abby.config.ts.

Return Value

The current value of the Remote Configuration variable. The type will be according to the specified type in the abby.config.ts

onAct

A function to call when the user performs an action associated with the test Type: function

Directives

Test Directive

The AbbyTest is an Angular directive provided by @tryabby/angular package that enables conditional rendering of components based on the selected variant of an A/B test. It works in conjunction with the AbbyService and is used to wrap the HTML code to be conditionally rendered.

Parameters

• testName: The name of the test, needs to be one of the defined tests.
• variant: The name of the variant to compare with the selected variant of the test.

Example

<ng-container *abbyTest="{ testName: 'test-abtest', variant: 'variant-a' }">AAAAAA</ng-container>
<ng-container *abbyTest="{ testName: 'test-abtest', variant: 'variant-b' }">BBBBBB</ng-container>

Flag Directive

The AbbyFlag is an Angular directive provided by @tryabby/core package that enables conditional rendering of components based on the value of a feature flag. It works in conjunction with the AbbyService and is used to wrap the HTML code to be conditionally rendered.

Parameters

The name of the feature flag. The name can be prefixed with ! to invert the flag value.

Example

<div *featureFlag="'test-flag'"></div>

Pipes

getAbbyVariant Pipe

Returns the active variant for an AB-Test. Automatically maps the active variant to a custom value if lookupObject is provided.

Parameters

• testName: The name of the test, needs to be one of the defined tests.
• lookupObject: An optional lookup object to automatically map the active variant to a custom value.

Example

<h4
  [ngStyle]="{
    'color': 'AngularTest'
      | getAbbyVariant: { A: 'blue', B: 'green', C: 'yellow', D: 'pink' }
      | async
  }"
>
  Variants Pipe
</h4>

getAbbyRemoteConfig Pipe

Returns the current value for a Remote Configuration variable.

Parameters

The name of the Remote Configuration variable, which needs to be one of the keys in your remoteConfig object in your ABBY config.

Example

<p>angularRemoteConfig: {{ "angularRemoteConfig" | getAbbyRemoteConfig | async }}</p>

Devtool Component

The DevtoolsComponent is an Angular component provided by @tryabby/angular package that renders the Abby Devtools in your application. The component is used to wrap the HTML code that renders the Abby Devtools.

The DevtoolsComponent won't work with Server Side Rendering using Angular Universal.

Example

<abby-devtools></abby-devtools>