Adding release toggles to an Angular app - the easy way
Tags: angular, featureflags, productivity, tutorial
Published: 2019-05-03 12:42:33

---
title: Adding release toggles to an Angular app - the easy way
published: true
description: A detailed walkthrough implementing feature toggles in your Angular app using Appknobs for trunk based development 
tags: #angular, #featureflags, #productivity, #tutorial
cover_image: https://thepracticaldev.s3.amazonaws.com/i/nl1x555rykzi7oi9k9i3.png
---

This tutorial is adapted for Angular from [Implementing release toggles with Appknobs, React & CLI ](https://dev.to/thekarel/implementing-release-toggles-with-appknobs-react-cli-3b06).

## Let's add a release toggle

When you're doing trunk-based development whatever is in your main branch - usually master - is pushed to production. At the same time, you might want to use short-lived feature branches, add small improvements at a time and integrate (merge) often. To prevent half-finished features appearing in production you will want to use *release toggles*. These toggles - also known as release flags - will allow you to deploy, demo and end-to-end test a feature under development by select users but keep it hidden from anyone else.

It is a very simple concept but comes with a few difficulties if you try to implement it from scratch. Hence we're going to use two open source NPM packages from Appknobs to get the job done super fast: [@appknobs/angular](https://www.npmjs.com/package/@appknobs/angular) for the UI and [@appknobs/cli](https://www.npmjs.com/package/@appknobs/cli) for the command line.


## Create a new project (optional)

We assume you have a working Angular 7 app ready for a new release toggle. If you need a quick sandbox, generate one using 

```sh
npm install -g @angular/cli
ng new my-sandbox --defaults
```

or with Yarn:

```sh
yarn global add @angular/cli
ng config -g cli.packageManager yarn
ng new my-sandbox --defaults
```

## Install dependencies

In your project's folder, install `@appknobs/angular`, `@appknobs/client` and `@appknobs/cli`:

```sh
npm install @appknobs/angular @appknobs/client && npm install -D @appknobs/cli
```

or

```sh
yarn add @appknobs/angular @appknobs/client && yarn add -D @appknobs/cli
```



## Add a release toggle

`@appknobs/angular` comes with a declarative feature toggle component `<ak-feature>`. After you wrap a section of your application in `<ak-feature name='...'><YourSection /></ak-feature>` it becomes a managed feature and so you can toggle the release without code changes. 

It's up to you to select a part of your UI to hide behind a toggle. If you're using the sandbox, open `src/app/app.component.html` and change it to

```html
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Angular_full_color_logo.svg/1200px-Angular_full_color_logo.svg.png">

  <ak-feature name="sandbox-message">
    <h1>I'm using release toggles in Angular!</h1>
  </ak-feature>
</div>
```

This code hides `<h1>I'm using release toggles in Angular!</h1>` behind a release toggle. Yes, it's a bit simplistic, but works nicely as an example. The `<ak-feature>` component can wrap any part of your UI hierarchy - so it's flexible and lets you cater for complex scenarios. 

Please note once a feature is managed it is hidden by default. So your message won't show up just yet.



## Feature flag autodiscovery

Use `@appknobs/cli` - the command line interface to Appknobs - to let the feature management service know about your release flag. With Yarn you can simply run `yarn knobs` to invoke it, otherwise, add a line to your `package.json`...

```json
  "scripts": {
    "knobs": "knobs"
  }
```

… and run `npm run knobs`. Installing `@appknobs/cli` as a global package or running `npx @appknobs/cli —help` also works. For the examples below we assume it's a global package. 

To make your life easier, Appknobs can look at your codebase, find & register all feature flags automatically. No need to manually copy-paste. 

Invoke `knobs parse src/` from the top level of your project and the tool will guide you through the process:

```sh
$ knobs parse src

You need to log in before you can upload feature flags from your project

? Would you like to log in or register now? …
  Log in
❯ Register
  Quit
```

Basically, you need to select *Register*, enter your email and a password, press enter:

```sh
App name: my-sandbox
App ID: DfXPWwujs4YxZc2~Ay8~9
Framework: auto-guessing

Found the following feature flags:
👉 sandbox-message

👍 sandbox-message saved
```

That's it 👏

Your release toggles are discovered and recorded in the Appknobs service automagically.



## Get your App ID

Please note your App ID as you'll need it soon. To find it later, run the following command:

```sh
$ knobs app-info

✔ App name: my-app-xxx
✔ appID: TfXPkjh3ysHYxZc2~Ay8~9
```



## Get your API key

You will need an API key to access Appknobs services from your app.

CLI is at your service again:

```sh
$ knobs apikey

✔ Your API key is: 62zYKyP8f8sAqxpPoYAcm and is valid until Mon May 13 2019
```

💡TIP: You can always go to our web console at https://console.appknobs.io/ to find this information.



## Connect to Appknobs service

To ensure each feature toggle "flips" when needed, we provide a **service** that propagates changes to all `<ak-feature>` automatically.

In the service configuration, you **inject the service client** that will fetch the available feature toggles of your app at runtime. You will need your `appId` and the `apiKey` from before.

Finally, you **send the runtime context** - e.g. username, hostname, cookie values, etc. - to the service to make the decision on the state of the app feature flags. The content of the context payload is 100% up to you. The following example is quite trivial but works for now and allows you to keep experimenting. [Find out more about the payload and conditions](/blog/getting-to-know-the-appknobs-console#define-the-conditions) in our previous blog post.

💡TIP: Check out the [`@appknobs/angular`](https://www.npmjs.com/package/@appknobs/angular) and [`@appknobs/client`](https://www.npmjs.com/package/@appknobs/client) documentation to learn about advanced topics or take a look at our code examples in the [appknobs/appknobs-examples](https://github.com/appknobs/appknobs-examples) repo.

For the sandbox example, the `src/app/app.module.ts` needs to be changed like this:

```tsx
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import the Appknobs modules
import { newBrowserClient } from '@appknobs/client';
import { AppknobsModule} from '@appknobs/angular';

// Configure the client
const appknobsClient = newBrowserClient({
  appId: 'YOUR_APP_ID',
  apiKey: 'YOUR_API_KEY'
});

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    // Inject the client
    AppknobsModule.forRoot({client: appknobsClient})
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```



## Fetching the feature list

You can fetch the list of enabled features any time. A quick & simple solution is to do it once at startup, but of course, this can be repeated anytime during the application lifecycle.

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

```tsx
import { Component, OnInit } from '@angular/core';

import {AppknobsService} from '@appknobs/angular';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-sandbox';

  private appknobs = null;

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

  ngOnInit() {
    // A quick-and-easy way to toggle features by deployment target:
    this.appknobs.evaluate({hostname: document.location.hostname});
  }
}
```



Start your app with

```sh
ng serve
```



## Your code is ready

As mentioned before, the thinking behind release toggles is that you can change the visibility of a feature without code changes. Since the "sandbox-message" feature is now managed, let's head over to the web console at https://console.appknobs.io/ and set the conditions.

💡TIP: `knobs console` will open the web UI

There is a [detailed guide to the web console](/blog/getting-to-know-the-appknobs-console) which you can refer to if needed. The steps are quite simple:

* Visit https://console.appknobs.io/
* **Log in** with your username and password
* Under your app - "my-sandbox" in our example - click **Edit features**
* Under the feature you've defined - "sandbox-message" in our example - click **Edit conditions**

In the **condition form**, let's add:

* `hostname` as property
* `Equal to` as predicate
* `localhost` as argument

— and save.



## Done

Reload your app and enjoy your amazing message! 🥇

![feature visible](https://thepracticaldev.s3.amazonaws.com/i/9e7ngen87b4ff8qlytvp.png)

Try setting the context payload in `app.component.ts` to something else, e.g. `{hostname: 'example.com'}` and see what happens. 

Note: evaluation is cached for 1 minute by the payload, so changes made *on the Console* might take a few seconds to be visible in the app.

Hopefully, this guide allows you to get started on a more productive, trunk based development journey using release toggles. Please share if you liked it or let me know if I've missed something!