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 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";
 
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AbbyModule.forRoot({
      projectId: "<YOUR_PROJECT_ID>",
      currentEnvironment: environment.production ? "production" : "development",
      tests: {
        test: { variants: ["A", "B"] },
        footer: { variants: ["dark", "orange", "green"] },
        // ... your tests
      },
      flags: ["darkMode", "newFeature"],
    }),
  ],
  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 the variant and act on any test.

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

💡

For this Example "strictPropertyInitialization" has to be set to false in your tsconfig. Otherwise you have to initialize "footerVariant" with an default value.

Using Abby Directives

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

<ng-container *featureFlag="'newFeature'">
  <!-- This will only be shown if the newFeature flag is active. -->
  <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>
 
<div
  class="footer"
  [ngStyle]="{'color': footerVariant === 'dark' ? 'black' : 
  footerVariant === 'orange' ? 'orange' : 
  footerVariant === 'green' ? 'green'}"
>
  Here is a Foooter
</div>

Svelte Next.js