Angular

Our Angular integration works with Angular 15 or later.

Installation

To get started make sure to install the packages using your favorite package manager.

npm i @tryabby/core
npm i @tryabby/angular

Usage

💡

Make sure, that you have set skipLibCheck to true in your tsconfig

Create your config

To use Abby you need to create your config first. You can do this by creating a file called abby.config.ts in your root folder. This file will be used to configure your project.

// abby.config.ts
import { defineConfig } from "@tryabby/angular";
 
export default defineConfig({
  projectId: "<YOUR_PROJECT_ID>",
  currentEnvironment: environment.production ? "production" : "development",
  environments: ["production", "development"],
  tests: {
    test: { variants: ["A", "B"] },
    footer: { variants: ["dark", "orange", "green"] },
    // ... your tests
  },
  flags: ["darkMode", "newFeature"],
  remoteConfig: {
    customButtonText: "String",
  },
});

Create your Module

To use Abby in your code you will need to import the AbbyModule in your app module first. You will need to call AbbyModule.forRoot() method with the configuration object. Please copy the id of your project from the dashboard to get started.

import { AbbyModule } from "@tryabby/angular";
import abbyConfig from "../abby.config";
 
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AbbyModule.forRoot(abbyConfig)],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Using Abby in your Component

You can now use Abby in your components. You will have access to the AbbyService which can be used to get one of your variants, a feature flag, a remote config variable or act on any test.

import { AbbyService } from '@tryabby/angular';
 
@Component({...})
export class MyComponent {
  footerVariant$ = this.abbyService.getVariant('footer');
 
  constructor(private abbyService: AbbyService) { }
 
  onAct() {
    this.abbyService.onAct('footer');
  }
}

Using Abby Directives

You can also use Abby's directives to conditionally render elements based on the variant or feature flag.

<ng-container *abbyFlag="'newFeature'">
  <!-- This will only be shown if the newFeature flag is truthy. -->
  <p>Here is the new feature</p>
</ng-container>
 
<ng-container *abbyTest="{testName: 'test', variant: 'A'}">
  <!-- This will only be shown if the test variant matches the variant. -->
  <p>Here is Variant A</p>
</ng-container>

Feature Flags can be inverted by putting a ! in front of the flagname.

<ng-container *abbyFlag="'!newFeature'">
  <!-- This will only be shown if the newFeature flag is falsy. -->
</ng-container>

For using variants inside an ngStyle-Directive, we advice you to move the logic into the component rather than the template:

import { AbbyService } from '@tryabby/angular';
 
@Component({...})
export class MyComponent {
  footerVariant$ = this.abbyService.getVariant('footer');
 
  footerColor$ = this.footerVariant$.pipe(
    map((footerVariant) => {
      switch(footerVariant) {
        case 'dark':
          return 'black';
        case 'orange':
          return 'orange';
        case 'green':
          return 'green';
        default:
          return 'transparent'
      }
    })
  );
 
  constructor(private abbyService: AbbyService) { }
}

You can then consume the footer color in your template using the async-Pipe:

<div class="footer" [ngStyle]="{ 'color': footerColor$ | async }">Here is a Foooter</div>

Using Abby Pipes

getAbbyVariant

You can use the getAbbyVariant Pipe in your template to get the active variant of an AB Test.

<p>{ "MyTestName" | getAbbyVariant | async }</p>

Optionally, you can pass in a lookup object, to map your variants to a custom type:

<p>{ "MyTestName" | getAbbyVariant: { A: 123, B: 456, C: 789 } | async }</p>

getRemoteConfig

You can use the getRemoteConfig Pipe in your template to get the value for a Remote Configuration variable.

<button>{{ "customButtonText" | getAbbyRemoteConfig | async }}</button>

Svelte Node