Example Angular application for CloudBees platform feature management

Use this example application to integrate with the CloudBees platform and test out feature management. After integrating, watch the application display change in response to any updates you make to flag values in the platform.

In the example application, the ROX package is already set up, and feature flags are already coded in.

Integrate the example application with the platform

Your SDK key is a unique environment identifier.

To successfully install the SDK, you must copy the SDK key for that environment into your application at the Rox setup call, save the file, and run the application.

1. Get the SDK key:

   • Create a CloudBees Feature Management account. See the signup page to create an account.

   • Locate and copy your SDK key:

   • Navigate to Feature management > Flags.

   • Select an application.

   • Select the copy button next to the SDK key on the page.

   • If the SDK has not been installed:

   • Navigate to Feature management > Flags.

   • Select Installation instructions on the top right-hand corner of the page.

   • The UI will walk you through:

   • Creating an environment

   • Linking the environment to an application

   • Installing the SDK

     Table 1. Location of SDK key placeholder in the Angular app

     Example app repository	File path	Line number	Line
     angular-fm-example	src/app/app.component.ts	21	sdkKey = '<YOUR-SDK-KEY>'

2. Replace the example app placeholder (<YOUR-SDK-KEY>) with your copied key.

3. Save the file in the repository.

The SDK key is generated for your environment and copied into the example application. To learn more, refer to the SDK installation instructions in the platform UI or the documentation.

Run the application

After saving your SDK key in the example application, run the example application.

Use your preferred package manager and run in the terminal:

ng serve

Then go to http://localhost:4200 to display the running application.

Tip	After you have the example application running, select TEST INTEGRATION in Step 5 of the SDK installation in the platform UI to check if your integration is successful.

Use the platform to update flag values

Now that your application is running, go to your environment in Feature management to display the flags available in the example application:

Table 2. Feature flags in the example application.

Flag name	Flag type	Description
showMessage	Boolean	Turns the message on or off.
message	String	Sets the message text.
fontSize	Number	Sets the font size in pixels. The flag value has the following variations: 12, 16, or 24.
fontColor	String	Sets the font color. The flag value has the following variations: red, green, or blue.

Note	If no flags are displayed, check that the environment-specific SDK key is correctly added to the example application.

To update flags in the platform UI:

1. Select Feature management from the left pane.

2. Select the vertical ellipsis icon next to the flag you want to configure.

3. Select Configure.

4. Select the Environment you used for copying the SDK key.

5. Update a flag value and save your changes.

6. Switch the Configuration status to On.

The updated flag value is reflected in the application. For more information on setting flag values, refer to the flag configuration documentation.

Note	This example application has been generated with Angular CLI version 17.3.8. Run ng build to build the project. The build artifacts are stored in the dist/ directory.

Refer to the CloudBees cloud-native platform documentation, install the Feature management SDK for more information.