Canopy Feature Toggle — Best Practices

This skill provides usage guidance for the Canopy LgFeatureToggleModule from @legal-and-general/canopy.

Apply this skill when enabling or disabling features using observable configuration flags.

---

Setup

Register the module with forRoot once in your root module, providing an observable of feature flag config:

import { LgFeatureToggleModule } from '@legal-and-general/canopy';

imports: [
  LgFeatureToggleModule.forRoot({
    deps: [Store],
    useFactory: (store: Store<CoreState>) => store.select(getFeatureToggles)
  })
]

The factory must return an Observable of a config object:

{
  "exampleFeature": true,
  "anotherFeature": false
}

Default hide behaviour

By default, features are shown if the flag is undefined. To hide features that are not explicitly configured:

imports: [
  LgFeatureToggleModule.forRoot(
    {
      deps: [Store],
      useFactory: (store: Store<CoreState>) => store.select(getFeatureToggles)
    },
    {
      defaultHide: true
    }
  )
]

---

Using in Feature Modules

Import LgFeatureToggleModule (without forRoot) in each feature module:

imports: [ LgFeatureToggleModule ]

---

Template Usage

Use the *lgFeatureToggle structural directive to conditionally render content:

<div *lgFeatureToggle="'exampleFeature'">
  <p>This content is only shown when exampleFeature is true.</p>
</div>

---

Route Guard

Protect routes with FeatureToggleGuard:

import { FeatureToggleGuard } from '@legal-and-general/canopy';

const routes: Routes = [
  {
    path: 'my-feature',
    component: MyFeatureComponent,
    canActivate: [FeatureToggleGuard],
    data: { featureToggle: 'myFeature' },
  },
];

For lazy-loaded routes with child guards:

{
  path: 'parent',
  loadChildren: () => import('./parent/parent.module').then(m => m.ParentModule),
  canActivate: [FeatureToggleGuard],
  canActivateChild: [FeatureToggleGuard],
  canLoad: [FeatureToggleGuard],
  data: { featureToggle: 'parentToggle' },
}

Child routes can define their own featureToggle in data. The path is only accessible when all toggle flags in the route chain are true.