0.7.0 • Published 5 years ago

@appknobs/angular v0.7.0

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
5 years ago

APPKNOBS ANGULAR

Declarative feature flags in Angular using Appknobs.io

Appknobs.io is an easy & ergonomic feature flag solution for your web & mobile apps, including modern libraries, management console, config delivery & CLI tools.

This package contains the Angular helper components.

Status

Supports Angular 7.x

Install

Add @appknobs/angular and @appknobs/client:

npm install @appknobs/angular @appknobs/client

or

yarn add @appknobs/angular @appknobs/client

Usage

Declaring features

You can use the Appknobs helper component to mark certain areas as managed features:

<ak-feature name='polite-greeting'>
  <h1>Pleased to meet you!</h1>
</ak-feature>

Import

In your app.module.ts, import the dependencies:

import { newBrowserClient } from '@appknobs/client';
import { AppknobsModule} from '@appknobs/angular';

Read @appknobs/client README for the list of clients plus hints on performance and bundle size.

Create a client instance

Also in app.module.ts, add

// Before @NgModule
const appknobsClient = newBrowserClient({
  appId: 'YOUR_APP_ID',
  apiKey: 'YOUR_API_KEY',
});

Go to console.appknobs.io to grab your API key and App ID or read this detailed tutorial.

Configure Appknobs

@NgModule({
  // ...
  imports: [
    // ...
    AppknobsModule.forRoot({client: appknobsClient}),
  ],
  // ...
})
export class AppModule { }

Fetch the feature list

You can fetch the list of enabled features any time. A quick & simple solution is to do it once at startup.

Inject AppknobsService into app.component.ts and make the call:

import { Component, OnInit } from '@angular/core';
import {AppknobsService} from '@appknobs/angular';

@Component({
  // ...
})
export class AppComponent implements OnInit {
  private appknobs = null;

  constructor(appknobs: AppknobsService) {
    this.appknobs = appknobs;
  }

  ngOnInit() {
    // If you toggle features by deployment target:
    this.appknobs.evaluate({hostname: document.location.hostname});
  }
}

Once configured, you can call AppknobsService.evaluate(payload) any time and all features will toggle depending on the response.


For more information visit appknobs.io or read in-depth tutorials in our blog. You can reach us at hello@appknobs.io or on @appknobs. We'd appreciate your feedback!