Skip to content
Angular Toolbar

App Features Tool

Overview

Section titled “Overview”

The App Features Tool allows developers to test product-level features that are typically controlled by license tiers, deployment configuration, or environment settings. This enables testing premium features without changing deployment configuration.

Use Cases

Section titled “Use Cases”
  • License Tier Testing: Test application behavior across different subscription tiers (Basic, Pro, Enterprise)
  • Premium Feature Development: Develop and test premium features without upgrading your development environment
  • Demo Preparation: Enable all features for demonstrations without changing your environment configuration

Quick Start

Section titled “Quick Start”
app.component.ts
import { Component, inject, signal } from '@angular/core';
import { ToolbarAppFeaturesService } from 'ngx-dev-toolbar';


@Component({
  selector: 'app-root',
  template: `
    @if (hasAnalytics()) {
      <app-analytics-dashboard />
    }
    @if (hasAdvancedReporting()) {
      <app-advanced-reports />
    }
  `
})
export class AppComponent {
  private appFeaturesService = inject(ToolbarAppFeaturesService);


  hasAnalytics = signal(false);
  hasAdvancedReporting = signal(false);


  ngOnInit() {
    // Define available app features
    this.appFeaturesService.setAvailableOptions([
      {
        id: 'analytics',
        name: 'Analytics Dashboard',
        description: 'Advanced analytics and insights',
        isEnabled: false,
        isForced: false
      },
      {
        id: 'advanced-reporting',
        name: 'Advanced Reporting',
        description: 'Export and custom reports',
        isEnabled: false,
        isForced: false
      }
    ]);


    // Subscribe to forced feature values
    this.appFeaturesService.getForcedValues().subscribe(features => {
      const analytics = features.find(f => f.id === 'analytics');
      const reporting = features.find(f => f.id === 'advanced-reporting');


      this.hasAnalytics.set(analytics?.isEnabled || false);
      this.hasAdvancedReporting.set(reporting?.isEnabled || false);
    });
  }
}

Apply to Source

Section titled “Apply to Source”

You can persist forced app feature values back to your actual data source. When configured, each feature item shows an “apply” button.

Call setApplyToSource() on the service — right alongside setAvailableOptions():

app-features.service.ts
import { Injectable, inject } from '@angular/core';
import { ToolbarAppFeaturesService } from 'ngx-dev-toolbar';


@Injectable({ providedIn: 'root' })
export class AppFeaturesService {
  private toolbarService = inject(ToolbarAppFeaturesService);


  constructor() {
    this.toolbarService.setAvailableOptions([...]); // [!code highlight]


    this.toolbarService.setApplyToSource(async (featureId, value) => { // [!code highlight]
      await fetch(`/api/app-features/${featureId}`, { // [!code highlight]
        method: 'PUT', // [!code highlight]
        body: JSON.stringify({ enabled: value }), // [!code highlight]
      }); // [!code highlight]
    }); // [!code highlight]
  }
}

The toolbar automatically manages loading, success, and error states for each item.

Section titled “Related Tools”