Feature Flags in angular 2 application, how to share an object with all components

Question

I'm trying to implement feature flags in my angular2 application, so I can be able to release features, that are not quite ready for produktion. Right now I have two markets, English and German market. I want to control the features separately on these markets.

My idea of how these flags should be used:

• To toggle on/off features based on a given market.
• A-B testing features based on the markets.
• Testing new styles on different components (like English market sees a certain list in one given approach where the German market sees it differently, also like A-B testing).
• Enable specific users to test specific features (admin, normal consumers und so weiter).

To enable some of that, I have tried to create two Json files in my Angular2 application.

Example:

{
  "PassengersFeature": {
    "displayed": true
  },
  "VehicleFeature": {
    "displayed": false
  },
  "DateFeature": {
    "displayed": false
  }
}

Right now, I have only added one value = "displayed" to test things.

Based on the given market "EN" or "DE", I'm loading the correct json file and puts it down in the features object I have created.

// When locale is set, load feature flags files.
this.features = this.appService.getFeaturesForLocale();

Now I want to share this object with all other components in the application. Is a service the best approach for this? or can you use something like $scope that you did in angularJS?

Answer 1

As of now sharedService seems best option for you scenario. Other approaches tell you about communication between Parent/Child, sibling/sibling components. So best way is to use sharedService and initialized it in bootstrap function.