Skip to content

refactor(angular): improve directive selector #225

@tomflenner

Description

@tomflenner

Summary

Refactor the Angular directive selector generated by the CLI to append the FeatureFlag suffix.

Instead of generating:

selector: '[{{ .Key | ToCamel }}]'

Generate:

selector: '[{{ .Key | ToCamel }}FeatureFlag]'

Motivation

This change aligns the CLI-generated Angular directives with the naming conventions already used in the Angular SDK, such as:

  • booleanFeatureFlag
  • stringFeatureFlag
  • <type>FeatureFlag

Using the FeatureFlag suffix provides:

  1. Consistency
    Keeps generated directives aligned with the existing Angular SDK patterns.

  2. Collision Prevention
    Prevents potential naming conflicts with:

    • End-user business domain inputs
    • Other Angular directives/selectors
    • Native HTML attributes

Since feature flag keys often reflect business concepts, generating a selector like:

<div [checkout]></div>

can easily conflict with application-level naming.

Whereas:

<div [checkoutFeatureFlag]></div>

is explicit, scoped, and significantly safer.


Expected Outcome

All Angular directives generated by the CLI should:

  • Follow the pattern:
    [{{ .Key | ToCamel }}FeatureFlag]
    
  • Be treated as a breaking change (major version bump) unless backward compatibility is explicitly preserved.

Impact

  • Improves SDK consistency
  • Reduces risk of selector collisions
  • Makes intent explicit in templates
  • Aligns CLI output with Angular SDK conventions

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions