UI and Views

This section covers patterns for controlling component visibility and UI elements using feature flags.

Showing/hiding components

In front-end applications, you can encapsulate the pattern of showing/hiding components in directives or higher order components.

React

Higher-order components, or HOCs, wrap other components to add behavior.

Here is an example:

function ldIf(flagKey, fallback=false, expectedValue=true) {
  return (component) => {
    return (props) => {
      const {flagValue = fallback } = useFlags()
      return flagValue === expectedValue ? component(props) : null;
    };
  }
}

const MyComponent = ldIf('show-my-component')(() => {
  return <div>My Component</div>;
});

function App() {
  return (
    <div>
      <MyComponent />
    </div>
  );
}

Angular

Structural directives like *ngIf control the presence of elements in the DOM. You can create a custom *ldIf directive that evaluates feature flags and conditionally renders template content. This approach integrates naturally with Angular templates and follows Angular’s directive patterns.

Here is an example:

<!--See: https://github.com/launchdarkly-labs/launchdarkly-angular-sdk-unofficial/tree/main -->
   <div *ldIf="'release-widget'; fallback: false; else: widgetUnavailableTemplate">
     <strong>release-widget:</strong> <span style="color: green;">AVAILABLE</span>
     <div style="margin-top:8px;padding:8px;background:#e8f5e8;border-radius:4px">[ Release Widget Available ]</div>
   </div>