From 9790ffe91dd68ecbc4d0f0225bddf1aa6893d6c7 Mon Sep 17 00:00:00 2001
From: backtrack5r3 <flennertom@gmail.com>
Date: Mon, 23 Feb 2026 15:02:05 +0100
Subject: [PATCH] refactor(angular): use [flagNameFeatureFlag] selector for
 generated directives

Signed-off-by: backtrack5r3 <flennertom@gmail.com>
---
 internal/cmd/testdata/success_angular.golden  | 174 +++++++++---------
 internal/generators/angular/angular.tmpl      |  36 ++--
 .../specs/directives.spec.ts                  |  32 ++--
 .../specs/ngtsc-compile.spec.ts               |  12 +-
 4 files changed, 127 insertions(+), 127 deletions(-)

diff --git a/internal/cmd/testdata/success_angular.golden b/internal/cmd/testdata/success_angular.golden
index b0deeed..bfccf38 100644
--- a/internal/cmd/testdata/success_angular.golden
+++ b/internal/cmd/testdata/success_angular.golden
@@ -272,12 +272,12 @@ export class GeneratedFeatureFlagService {
  * @example
  * Explicit `ng-template` (no `*`), bind inputs directly
  * ```html
- * <ng-template discountPercentage
- *   [discountPercentageDefault]="defaultValue"
- *   [discountPercentageValue]="expectedValue"
- *   [discountPercentageElse]="elseTemplate"
- *   [discountPercentageInitializing]="initTemplate"
- *   [discountPercentageReconciling]="reconcilingTemplate">
+ * <ng-template discountPercentageFeatureFlag
+ *   [discountPercentageFeatureFlagDefault]="defaultValue"
+ *   [discountPercentageFeatureFlagValue]="expectedValue"
+ *   [discountPercentageFeatureFlagElse]="elseTemplate"
+ *   [discountPercentageFeatureFlagInitializing]="initTemplate"
+ *   [discountPercentageFeatureFlagReconciling]="reconcilingTemplate">
  *   <div>Content shown when flag is matched.</div>
  * </ng-template>
  * <ng-template #elseTemplate>
@@ -288,7 +288,7 @@ export class GeneratedFeatureFlagService {
  * @example
  * Microsyntax `*` form, start with `let`
  * ```html
- * <div *discountPercentage="let v; value: expectedValue; else: elseTemplate; initializing: initTemplate; reconciling: reconcilingTemplate">
+ * <div *discountPercentageFeatureFlag="let v; value: expectedValue; else: elseTemplate; initializing: initTemplate; reconciling: reconcilingTemplate">
  *   Content shown when flag is matched.
  * </div>
  * ```
@@ -296,7 +296,7 @@ export class GeneratedFeatureFlagService {
  * @example
  * Simple `*` usage (no else/initializing/reconciling)
  * ```html
- * <div *discountPercentage="let v">
+ * <div *discountPercentageFeatureFlag="let v">
  *   Content shown when flag is matched.
  * </div>
  * ```
@@ -307,12 +307,12 @@ export class GeneratedFeatureFlagService {
  * `let v` or `let details = evaluationDetails` (or `let _` if you do not need the value)
  * before any `else`/`initializing`/`reconciling`/`default` segments.
  * This is an Angular microsyntax parsing constraint, not a directive limitation.
- * `*discountPercentage="else elseTemplate"` will not parse because `else` is a
+ * `*discountPercentageFeatureFlag="else elseTemplate"` will not parse because `else` is a
  * secondary segment. If you do not need the value, use `let _`, or use the
  * explicit `ng-template` form above.
  */
 @Directive({
-  selector: '[discountPercentage]',
+  selector: '[discountPercentageFeatureFlag]',
   standalone: true,
 })
 export class DiscountPercentageFeatureFlagDirective extends FeatureFlagDirective<number> implements OnChanges {
@@ -323,7 +323,7 @@ export class DiscountPercentageFeatureFlagDirective extends FeatureFlagDirective
   /**
    * The expected value of this number feature flag, for which the `then` template should be rendered.
    */
-  @Input({ required: false }) discountPercentageValue?: number;
+  @Input({ required: false }) discountPercentageFeatureFlagValue?: number;
 
   constructor() {
     super();
@@ -336,14 +336,14 @@ export class DiscountPercentageFeatureFlagDirective extends FeatureFlagDirective
   override ngOnChanges() {
     super.ngOnChanges();
 
-    this._featureFlagValue = this.discountPercentageValue;
+    this._featureFlagValue = this.discountPercentageFeatureFlagValue;
   }
 
   /**
    * The domain of the number feature flag.
    */
   @Input({ required: false })
-  set discountPercentageDomain(domain: string | undefined) {
+  set discountPercentageFeatureFlagDomain(domain: string | undefined) {
     super.featureFlagDomain = domain;
   }
 
@@ -354,7 +354,7 @@ export class DiscountPercentageFeatureFlagDirective extends FeatureFlagDirective
    * Defaults to true.
    */
   @Input({ required: false })
-  set discountPercentageUpdateOnConfigurationChanged(enabled: boolean | undefined) {
+  set discountPercentageFeatureFlagUpdateOnConfigurationChanged(enabled: boolean | undefined) {
     this._updateOnConfigurationChanged = enabled ?? true;
   }
 
@@ -365,7 +365,7 @@ export class DiscountPercentageFeatureFlagDirective extends FeatureFlagDirective
    * Defaults to true.
    */
   @Input({ required: false })
-  set discountPercentageUpdateOnContextChanged(enabled: boolean | undefined) {
+  set discountPercentageFeatureFlagUpdateOnContextChanged(enabled: boolean | undefined) {
     this._updateOnContextChanged = enabled ?? true;
   }
 
@@ -373,7 +373,7 @@ export class DiscountPercentageFeatureFlagDirective extends FeatureFlagDirective
    * Template to be displayed when the feature flag does not match value.
    */
   @Input()
-  set discountPercentageElse(tpl: TemplateRef<FeatureFlagDirectiveContext<number>>) {
+  set discountPercentageFeatureFlagElse(tpl: TemplateRef<FeatureFlagDirectiveContext<number>>) {
     this._elseTemplateRef = tpl;
   }
 
@@ -381,7 +381,7 @@ export class DiscountPercentageFeatureFlagDirective extends FeatureFlagDirective
    * Template to be displayed when the provider is not ready.
    */
   @Input()
-  set discountPercentageInitializing(tpl: TemplateRef<FeatureFlagDirectiveContext<number>>) {
+  set discountPercentageFeatureFlagInitializing(tpl: TemplateRef<FeatureFlagDirectiveContext<number>>) {
     this._initializingTemplateRef = tpl;
   }
 
@@ -389,7 +389,7 @@ export class DiscountPercentageFeatureFlagDirective extends FeatureFlagDirective
    * Template to be displayed when the provider is reconciling.
    */
   @Input()
-  set discountPercentageReconciling(tpl: TemplateRef<FeatureFlagDirectiveContext<number>>) {
+  set discountPercentageFeatureFlagReconciling(tpl: TemplateRef<FeatureFlagDirectiveContext<number>>) {
     this._reconcilingTemplateRef = tpl;
   }
 }
@@ -413,11 +413,11 @@ export class DiscountPercentageFeatureFlagDirective extends FeatureFlagDirective
  * @example
  * Explicit `ng-template` (no `*`), bind inputs directly
  * ```html
- * <ng-template enableFeatureA
- *   [enableFeatureADefault]="defaultValue"
- *   [enableFeatureAElse]="elseTemplate"
- *   [enableFeatureAInitializing]="initTemplate"
- *   [enableFeatureAReconciling]="reconcilingTemplate">
+ * <ng-template enableFeatureAFeatureFlag
+ *   [enableFeatureAFeatureFlagDefault]="defaultValue"
+ *   [enableFeatureAFeatureFlagElse]="elseTemplate"
+ *   [enableFeatureAFeatureFlagInitializing]="initTemplate"
+ *   [enableFeatureAFeatureFlagReconciling]="reconcilingTemplate">
  *   <div>Content shown when flag is enabled.</div>
  * </ng-template>
  * <ng-template #elseTemplate>
@@ -428,7 +428,7 @@ export class DiscountPercentageFeatureFlagDirective extends FeatureFlagDirective
  * @example
  * Microsyntax `*` form, start with `let`
  * ```html
- * <div *enableFeatureA="let v; else: elseTemplate; initializing: initTemplate; reconciling: reconcilingTemplate">
+ * <div *enableFeatureAFeatureFlag="let v; else: elseTemplate; initializing: initTemplate; reconciling: reconcilingTemplate">
  *   Content shown when flag is enabled.
  * </div>
  * ```
@@ -436,7 +436,7 @@ export class DiscountPercentageFeatureFlagDirective extends FeatureFlagDirective
  * @example
  * Simple `*` usage (no else/initializing/reconciling)
  * ```html
- * <div *enableFeatureA="let v">
+ * <div *enableFeatureAFeatureFlag="let v">
  *   Content shown when flag is enabled.
  * </div>
  * ```
@@ -447,12 +447,12 @@ export class DiscountPercentageFeatureFlagDirective extends FeatureFlagDirective
  * `let v` or `let details = evaluationDetails` (or `let _` if you do not need the value)
  * before any `else`/`initializing`/`reconciling`/`default` segments.
  * This is an Angular microsyntax parsing constraint, not a directive limitation.
- * `*enableFeatureA="else elseTemplate"` will not parse because `else` is a
+ * `*enableFeatureAFeatureFlag="else elseTemplate"` will not parse because `else` is a
  * secondary segment. If you do not need the value, use `let _`, or use the
  * explicit `ng-template` form above.
  */
 @Directive({
-  selector: '[enableFeatureA]',
+  selector: '[enableFeatureAFeatureFlag]',
   standalone: true,
 })
 export class EnableFeatureAFeatureFlagDirective extends FeatureFlagDirective<boolean> implements OnChanges {
@@ -474,7 +474,7 @@ export class EnableFeatureAFeatureFlagDirective extends FeatureFlagDirective<boo
    * The domain of the boolean feature flag.
    */
   @Input({ required: false })
-  set enableFeatureADomain(domain: string | undefined) {
+  set enableFeatureAFeatureFlagDomain(domain: string | undefined) {
     super.featureFlagDomain = domain;
   }
 
@@ -485,7 +485,7 @@ export class EnableFeatureAFeatureFlagDirective extends FeatureFlagDirective<boo
    * Defaults to true.
    */
   @Input({ required: false })
-  set enableFeatureAUpdateOnConfigurationChanged(enabled: boolean | undefined) {
+  set enableFeatureAFeatureFlagUpdateOnConfigurationChanged(enabled: boolean | undefined) {
     this._updateOnConfigurationChanged = enabled ?? true;
   }
 
@@ -496,7 +496,7 @@ export class EnableFeatureAFeatureFlagDirective extends FeatureFlagDirective<boo
    * Defaults to true.
    */
   @Input({ required: false })
-  set enableFeatureAUpdateOnContextChanged(enabled: boolean | undefined) {
+  set enableFeatureAFeatureFlagUpdateOnContextChanged(enabled: boolean | undefined) {
     this._updateOnContextChanged = enabled ?? true;
   }
 
@@ -504,7 +504,7 @@ export class EnableFeatureAFeatureFlagDirective extends FeatureFlagDirective<boo
    * Template to be displayed when the feature flag is false.
    */
   @Input()
-  set enableFeatureAElse(tpl: TemplateRef<FeatureFlagDirectiveContext<boolean>>) {
+  set enableFeatureAFeatureFlagElse(tpl: TemplateRef<FeatureFlagDirectiveContext<boolean>>) {
     this._elseTemplateRef = tpl;
   }
 
@@ -512,7 +512,7 @@ export class EnableFeatureAFeatureFlagDirective extends FeatureFlagDirective<boo
    * Template to be displayed when the provider is not ready.
    */
   @Input()
-  set enableFeatureAInitializing(tpl: TemplateRef<FeatureFlagDirectiveContext<boolean>>) {
+  set enableFeatureAFeatureFlagInitializing(tpl: TemplateRef<FeatureFlagDirectiveContext<boolean>>) {
     this._initializingTemplateRef = tpl;
   }
 
@@ -520,7 +520,7 @@ export class EnableFeatureAFeatureFlagDirective extends FeatureFlagDirective<boo
    * Template to be displayed when the provider is reconciling.
    */
   @Input()
-  set enableFeatureAReconciling(tpl: TemplateRef<FeatureFlagDirectiveContext<boolean>>) {
+  set enableFeatureAFeatureFlagReconciling(tpl: TemplateRef<FeatureFlagDirectiveContext<boolean>>) {
     this._reconcilingTemplateRef = tpl;
   }
 }
@@ -544,12 +544,12 @@ export class EnableFeatureAFeatureFlagDirective extends FeatureFlagDirective<boo
  * @example
  * Explicit `ng-template` (no `*`), bind inputs directly
  * ```html
- * <ng-template greetingMessage
- *   [greetingMessageDefault]="defaultValue"
- *   [greetingMessageValue]="expectedValue"
- *   [greetingMessageElse]="elseTemplate"
- *   [greetingMessageInitializing]="initTemplate"
- *   [greetingMessageReconciling]="reconcilingTemplate">
+ * <ng-template greetingMessageFeatureFlag
+ *   [greetingMessageFeatureFlagDefault]="defaultValue"
+ *   [greetingMessageFeatureFlagValue]="expectedValue"
+ *   [greetingMessageFeatureFlagElse]="elseTemplate"
+ *   [greetingMessageFeatureFlagInitializing]="initTemplate"
+ *   [greetingMessageFeatureFlagReconciling]="reconcilingTemplate">
  *   <div>Content shown when flag is matched.</div>
  * </ng-template>
  * <ng-template #elseTemplate>
@@ -560,7 +560,7 @@ export class EnableFeatureAFeatureFlagDirective extends FeatureFlagDirective<boo
  * @example
  * Microsyntax `*` form, start with `let`
  * ```html
- * <div *greetingMessage="let v; value: expectedValue; else: elseTemplate; initializing: initTemplate; reconciling: reconcilingTemplate">
+ * <div *greetingMessageFeatureFlag="let v; value: expectedValue; else: elseTemplate; initializing: initTemplate; reconciling: reconcilingTemplate">
  *   Content shown when flag is matched.
  * </div>
  * ```
@@ -568,7 +568,7 @@ export class EnableFeatureAFeatureFlagDirective extends FeatureFlagDirective<boo
  * @example
  * Simple `*` usage (no else/initializing/reconciling)
  * ```html
- * <div *greetingMessage="let v">
+ * <div *greetingMessageFeatureFlag="let v">
  *   Content shown when flag is matched.
  * </div>
  * ```
@@ -579,12 +579,12 @@ export class EnableFeatureAFeatureFlagDirective extends FeatureFlagDirective<boo
  * `let v` or `let details = evaluationDetails` (or `let _` if you do not need the value)
  * before any `else`/`initializing`/`reconciling`/`default` segments.
  * This is an Angular microsyntax parsing constraint, not a directive limitation.
- * `*greetingMessage="else elseTemplate"` will not parse because `else` is a
+ * `*greetingMessageFeatureFlag="else elseTemplate"` will not parse because `else` is a
  * secondary segment. If you do not need the value, use `let _`, or use the
  * explicit `ng-template` form above.
  */
 @Directive({
-  selector: '[greetingMessage]',
+  selector: '[greetingMessageFeatureFlag]',
   standalone: true,
 })
 export class GreetingMessageFeatureFlagDirective extends FeatureFlagDirective<string> implements OnChanges {
@@ -595,7 +595,7 @@ export class GreetingMessageFeatureFlagDirective extends FeatureFlagDirective<st
   /**
    * The expected value of this string feature flag, for which the `then` template should be rendered.
    */
-  @Input({ required: false }) greetingMessageValue?: string;
+  @Input({ required: false }) greetingMessageFeatureFlagValue?: string;
 
   constructor() {
     super();
@@ -608,14 +608,14 @@ export class GreetingMessageFeatureFlagDirective extends FeatureFlagDirective<st
   override ngOnChanges() {
     super.ngOnChanges();
 
-    this._featureFlagValue = this.greetingMessageValue;
+    this._featureFlagValue = this.greetingMessageFeatureFlagValue;
   }
 
   /**
    * The domain of the string feature flag.
    */
   @Input({ required: false })
-  set greetingMessageDomain(domain: string | undefined) {
+  set greetingMessageFeatureFlagDomain(domain: string | undefined) {
     super.featureFlagDomain = domain;
   }
 
@@ -626,7 +626,7 @@ export class GreetingMessageFeatureFlagDirective extends FeatureFlagDirective<st
    * Defaults to true.
    */
   @Input({ required: false })
-  set greetingMessageUpdateOnConfigurationChanged(enabled: boolean | undefined) {
+  set greetingMessageFeatureFlagUpdateOnConfigurationChanged(enabled: boolean | undefined) {
     this._updateOnConfigurationChanged = enabled ?? true;
   }
 
@@ -637,7 +637,7 @@ export class GreetingMessageFeatureFlagDirective extends FeatureFlagDirective<st
    * Defaults to true.
    */
   @Input({ required: false })
-  set greetingMessageUpdateOnContextChanged(enabled: boolean | undefined) {
+  set greetingMessageFeatureFlagUpdateOnContextChanged(enabled: boolean | undefined) {
     this._updateOnContextChanged = enabled ?? true;
   }
 
@@ -645,7 +645,7 @@ export class GreetingMessageFeatureFlagDirective extends FeatureFlagDirective<st
    * Template to be displayed when the feature flag does not match value.
    */
   @Input()
-  set greetingMessageElse(tpl: TemplateRef<FeatureFlagDirectiveContext<string>>) {
+  set greetingMessageFeatureFlagElse(tpl: TemplateRef<FeatureFlagDirectiveContext<string>>) {
     this._elseTemplateRef = tpl;
   }
 
@@ -653,7 +653,7 @@ export class GreetingMessageFeatureFlagDirective extends FeatureFlagDirective<st
    * Template to be displayed when the provider is not ready.
    */
   @Input()
-  set greetingMessageInitializing(tpl: TemplateRef<FeatureFlagDirectiveContext<string>>) {
+  set greetingMessageFeatureFlagInitializing(tpl: TemplateRef<FeatureFlagDirectiveContext<string>>) {
     this._initializingTemplateRef = tpl;
   }
 
@@ -661,7 +661,7 @@ export class GreetingMessageFeatureFlagDirective extends FeatureFlagDirective<st
    * Template to be displayed when the provider is reconciling.
    */
   @Input()
-  set greetingMessageReconciling(tpl: TemplateRef<FeatureFlagDirectiveContext<string>>) {
+  set greetingMessageFeatureFlagReconciling(tpl: TemplateRef<FeatureFlagDirectiveContext<string>>) {
     this._reconcilingTemplateRef = tpl;
   }
 }
@@ -685,12 +685,12 @@ export class GreetingMessageFeatureFlagDirective extends FeatureFlagDirective<st
  * @example
  * Explicit `ng-template` (no `*`), bind inputs directly
  * ```html
- * <ng-template themeCustomization
- *   [themeCustomizationDefault]="defaultValue"
- *   [themeCustomizationValue]="expectedValue"
- *   [themeCustomizationElse]="elseTemplate"
- *   [themeCustomizationInitializing]="initTemplate"
- *   [themeCustomizationReconciling]="reconcilingTemplate">
+ * <ng-template themeCustomizationFeatureFlag
+ *   [themeCustomizationFeatureFlagDefault]="defaultValue"
+ *   [themeCustomizationFeatureFlagValue]="expectedValue"
+ *   [themeCustomizationFeatureFlagElse]="elseTemplate"
+ *   [themeCustomizationFeatureFlagInitializing]="initTemplate"
+ *   [themeCustomizationFeatureFlagReconciling]="reconcilingTemplate">
  *   <div>Content shown when flag is matched.</div>
  * </ng-template>
  * <ng-template #elseTemplate>
@@ -701,7 +701,7 @@ export class GreetingMessageFeatureFlagDirective extends FeatureFlagDirective<st
  * @example
  * Microsyntax `*` form, start with `let`
  * ```html
- * <div *themeCustomization="let v; value: expectedValue; else: elseTemplate; initializing: initTemplate; reconciling: reconcilingTemplate">
+ * <div *themeCustomizationFeatureFlag="let v; value: expectedValue; else: elseTemplate; initializing: initTemplate; reconciling: reconcilingTemplate">
  *   Content shown when flag is matched.
  * </div>
  * ```
@@ -709,7 +709,7 @@ export class GreetingMessageFeatureFlagDirective extends FeatureFlagDirective<st
  * @example
  * Simple `*` usage (no else/initializing/reconciling)
  * ```html
- * <div *themeCustomization="let v">
+ * <div *themeCustomizationFeatureFlag="let v">
  *   Content shown when flag is matched.
  * </div>
  * ```
@@ -720,12 +720,12 @@ export class GreetingMessageFeatureFlagDirective extends FeatureFlagDirective<st
  * `let v` or `let details = evaluationDetails` (or `let _` if you do not need the value)
  * before any `else`/`initializing`/`reconciling`/`default` segments.
  * This is an Angular microsyntax parsing constraint, not a directive limitation.
- * `*themeCustomization="else elseTemplate"` will not parse because `else` is a
+ * `*themeCustomizationFeatureFlag="else elseTemplate"` will not parse because `else` is a
  * secondary segment. If you do not need the value, use `let _`, or use the
  * explicit `ng-template` form above.
  */
 @Directive({
-  selector: '[themeCustomization]',
+  selector: '[themeCustomizationFeatureFlag]',
   standalone: true,
 })
 export class ThemeCustomizationFeatureFlagDirective extends FeatureFlagDirective<JsonValue> implements OnChanges {
@@ -736,7 +736,7 @@ export class ThemeCustomizationFeatureFlagDirective extends FeatureFlagDirective
   /**
    * The expected value of this object feature flag, for which the `then` template should be rendered.
    */
-  @Input({ required: false }) themeCustomizationValue?: JsonValue;
+  @Input({ required: false }) themeCustomizationFeatureFlagValue?: JsonValue;
 
   constructor() {
     super();
@@ -749,14 +749,14 @@ export class ThemeCustomizationFeatureFlagDirective extends FeatureFlagDirective
   override ngOnChanges() {
     super.ngOnChanges();
 
-    this._featureFlagValue = this.themeCustomizationValue;
+    this._featureFlagValue = this.themeCustomizationFeatureFlagValue;
   }
 
   /**
    * The domain of the object feature flag.
    */
   @Input({ required: false })
-  set themeCustomizationDomain(domain: string | undefined) {
+  set themeCustomizationFeatureFlagDomain(domain: string | undefined) {
     super.featureFlagDomain = domain;
   }
 
@@ -767,7 +767,7 @@ export class ThemeCustomizationFeatureFlagDirective extends FeatureFlagDirective
    * Defaults to true.
    */
   @Input({ required: false })
-  set themeCustomizationUpdateOnConfigurationChanged(enabled: boolean | undefined) {
+  set themeCustomizationFeatureFlagUpdateOnConfigurationChanged(enabled: boolean | undefined) {
     this._updateOnConfigurationChanged = enabled ?? true;
   }
 
@@ -778,7 +778,7 @@ export class ThemeCustomizationFeatureFlagDirective extends FeatureFlagDirective
    * Defaults to true.
    */
   @Input({ required: false })
-  set themeCustomizationUpdateOnContextChanged(enabled: boolean | undefined) {
+  set themeCustomizationFeatureFlagUpdateOnContextChanged(enabled: boolean | undefined) {
     this._updateOnContextChanged = enabled ?? true;
   }
 
@@ -786,7 +786,7 @@ export class ThemeCustomizationFeatureFlagDirective extends FeatureFlagDirective
    * Template to be displayed when the feature flag does not match value.
    */
   @Input()
-  set themeCustomizationElse(tpl: TemplateRef<FeatureFlagDirectiveContext<JsonValue>>) {
+  set themeCustomizationFeatureFlagElse(tpl: TemplateRef<FeatureFlagDirectiveContext<JsonValue>>) {
     this._elseTemplateRef = tpl;
   }
 
@@ -794,7 +794,7 @@ export class ThemeCustomizationFeatureFlagDirective extends FeatureFlagDirective
    * Template to be displayed when the provider is not ready.
    */
   @Input()
-  set themeCustomizationInitializing(tpl: TemplateRef<FeatureFlagDirectiveContext<JsonValue>>) {
+  set themeCustomizationFeatureFlagInitializing(tpl: TemplateRef<FeatureFlagDirectiveContext<JsonValue>>) {
     this._initializingTemplateRef = tpl;
   }
 
@@ -802,7 +802,7 @@ export class ThemeCustomizationFeatureFlagDirective extends FeatureFlagDirective
    * Template to be displayed when the provider is reconciling.
    */
   @Input()
-  set themeCustomizationReconciling(tpl: TemplateRef<FeatureFlagDirectiveContext<JsonValue>>) {
+  set themeCustomizationFeatureFlagReconciling(tpl: TemplateRef<FeatureFlagDirectiveContext<JsonValue>>) {
     this._reconcilingTemplateRef = tpl;
   }
 }
@@ -826,12 +826,12 @@ export class ThemeCustomizationFeatureFlagDirective extends FeatureFlagDirective
  * @example
  * Explicit `ng-template` (no `*`), bind inputs directly
  * ```html
- * <ng-template usernameMaxLength
- *   [usernameMaxLengthDefault]="defaultValue"
- *   [usernameMaxLengthValue]="expectedValue"
- *   [usernameMaxLengthElse]="elseTemplate"
- *   [usernameMaxLengthInitializing]="initTemplate"
- *   [usernameMaxLengthReconciling]="reconcilingTemplate">
+ * <ng-template usernameMaxLengthFeatureFlag
+ *   [usernameMaxLengthFeatureFlagDefault]="defaultValue"
+ *   [usernameMaxLengthFeatureFlagValue]="expectedValue"
+ *   [usernameMaxLengthFeatureFlagElse]="elseTemplate"
+ *   [usernameMaxLengthFeatureFlagInitializing]="initTemplate"
+ *   [usernameMaxLengthFeatureFlagReconciling]="reconcilingTemplate">
  *   <div>Content shown when flag is matched.</div>
  * </ng-template>
  * <ng-template #elseTemplate>
@@ -842,7 +842,7 @@ export class ThemeCustomizationFeatureFlagDirective extends FeatureFlagDirective
  * @example
  * Microsyntax `*` form, start with `let`
  * ```html
- * <div *usernameMaxLength="let v; value: expectedValue; else: elseTemplate; initializing: initTemplate; reconciling: reconcilingTemplate">
+ * <div *usernameMaxLengthFeatureFlag="let v; value: expectedValue; else: elseTemplate; initializing: initTemplate; reconciling: reconcilingTemplate">
  *   Content shown when flag is matched.
  * </div>
  * ```
@@ -850,7 +850,7 @@ export class ThemeCustomizationFeatureFlagDirective extends FeatureFlagDirective
  * @example
  * Simple `*` usage (no else/initializing/reconciling)
  * ```html
- * <div *usernameMaxLength="let v">
+ * <div *usernameMaxLengthFeatureFlag="let v">
  *   Content shown when flag is matched.
  * </div>
  * ```
@@ -861,12 +861,12 @@ export class ThemeCustomizationFeatureFlagDirective extends FeatureFlagDirective
  * `let v` or `let details = evaluationDetails` (or `let _` if you do not need the value)
  * before any `else`/`initializing`/`reconciling`/`default` segments.
  * This is an Angular microsyntax parsing constraint, not a directive limitation.
- * `*usernameMaxLength="else elseTemplate"` will not parse because `else` is a
+ * `*usernameMaxLengthFeatureFlag="else elseTemplate"` will not parse because `else` is a
  * secondary segment. If you do not need the value, use `let _`, or use the
  * explicit `ng-template` form above.
  */
 @Directive({
-  selector: '[usernameMaxLength]',
+  selector: '[usernameMaxLengthFeatureFlag]',
   standalone: true,
 })
 export class UsernameMaxLengthFeatureFlagDirective extends FeatureFlagDirective<number> implements OnChanges {
@@ -877,7 +877,7 @@ export class UsernameMaxLengthFeatureFlagDirective extends FeatureFlagDirective<
   /**
    * The expected value of this number feature flag, for which the `then` template should be rendered.
    */
-  @Input({ required: false }) usernameMaxLengthValue?: number;
+  @Input({ required: false }) usernameMaxLengthFeatureFlagValue?: number;
 
   constructor() {
     super();
@@ -890,14 +890,14 @@ export class UsernameMaxLengthFeatureFlagDirective extends FeatureFlagDirective<
   override ngOnChanges() {
     super.ngOnChanges();
 
-    this._featureFlagValue = this.usernameMaxLengthValue;
+    this._featureFlagValue = this.usernameMaxLengthFeatureFlagValue;
   }
 
   /**
    * The domain of the number feature flag.
    */
   @Input({ required: false })
-  set usernameMaxLengthDomain(domain: string | undefined) {
+  set usernameMaxLengthFeatureFlagDomain(domain: string | undefined) {
     super.featureFlagDomain = domain;
   }
 
@@ -908,7 +908,7 @@ export class UsernameMaxLengthFeatureFlagDirective extends FeatureFlagDirective<
    * Defaults to true.
    */
   @Input({ required: false })
-  set usernameMaxLengthUpdateOnConfigurationChanged(enabled: boolean | undefined) {
+  set usernameMaxLengthFeatureFlagUpdateOnConfigurationChanged(enabled: boolean | undefined) {
     this._updateOnConfigurationChanged = enabled ?? true;
   }
 
@@ -919,7 +919,7 @@ export class UsernameMaxLengthFeatureFlagDirective extends FeatureFlagDirective<
    * Defaults to true.
    */
   @Input({ required: false })
-  set usernameMaxLengthUpdateOnContextChanged(enabled: boolean | undefined) {
+  set usernameMaxLengthFeatureFlagUpdateOnContextChanged(enabled: boolean | undefined) {
     this._updateOnContextChanged = enabled ?? true;
   }
 
@@ -927,7 +927,7 @@ export class UsernameMaxLengthFeatureFlagDirective extends FeatureFlagDirective<
    * Template to be displayed when the feature flag does not match value.
    */
   @Input()
-  set usernameMaxLengthElse(tpl: TemplateRef<FeatureFlagDirectiveContext<number>>) {
+  set usernameMaxLengthFeatureFlagElse(tpl: TemplateRef<FeatureFlagDirectiveContext<number>>) {
     this._elseTemplateRef = tpl;
   }
 
@@ -935,7 +935,7 @@ export class UsernameMaxLengthFeatureFlagDirective extends FeatureFlagDirective<
    * Template to be displayed when the provider is not ready.
    */
   @Input()
-  set usernameMaxLengthInitializing(tpl: TemplateRef<FeatureFlagDirectiveContext<number>>) {
+  set usernameMaxLengthFeatureFlagInitializing(tpl: TemplateRef<FeatureFlagDirectiveContext<number>>) {
     this._initializingTemplateRef = tpl;
   }
 
@@ -943,7 +943,7 @@ export class UsernameMaxLengthFeatureFlagDirective extends FeatureFlagDirective<
    * Template to be displayed when the provider is reconciling.
    */
   @Input()
-  set usernameMaxLengthReconciling(tpl: TemplateRef<FeatureFlagDirectiveContext<number>>) {
+  set usernameMaxLengthFeatureFlagReconciling(tpl: TemplateRef<FeatureFlagDirectiveContext<number>>) {
     this._reconcilingTemplateRef = tpl;
   }
 }
diff --git a/internal/generators/angular/angular.tmpl b/internal/generators/angular/angular.tmpl
index f0766ff..e3a563a 100644
--- a/internal/generators/angular/angular.tmpl
+++ b/internal/generators/angular/angular.tmpl
@@ -134,12 +134,12 @@ export class GeneratedFeatureFlagService {
  * @example
  * Explicit `ng-template` (no `*`), bind inputs directly
  * ```html
- * <ng-template {{ .Key | ToCamel }}
- *   [{{ .Key | ToCamel }}Default]="defaultValue"
- *   {{ if ne $type "boolean" }}[{{ .Key | ToCamel }}Value]="expectedValue"
- *   {{ end }}[{{ .Key | ToCamel }}Else]="elseTemplate"
- *   [{{ .Key | ToCamel }}Initializing]="initTemplate"
- *   [{{ .Key | ToCamel }}Reconciling]="reconcilingTemplate">
+ * <ng-template {{ .Key | ToCamel }}FeatureFlag
+ *   [{{ .Key | ToCamel }}FeatureFlagDefault]="defaultValue"
+ *   {{ if ne $type "boolean" }}[{{ .Key | ToCamel }}FeatureFlagValue]="expectedValue"
+ *   {{ end }}[{{ .Key | ToCamel }}FeatureFlagElse]="elseTemplate"
+ *   [{{ .Key | ToCamel }}FeatureFlagInitializing]="initTemplate"
+ *   [{{ .Key | ToCamel }}FeatureFlagReconciling]="reconcilingTemplate">
  *   <div>Content shown when flag is {{ if eq $type "boolean" }}enabled{{ else }}matched{{ end }}.</div>
  * </ng-template>
  * <ng-template #elseTemplate>
@@ -150,7 +150,7 @@ export class GeneratedFeatureFlagService {
  * @example
  * Microsyntax `*` form, start with `let`
  * ```html
- * <div *{{ .Key | ToCamel }}="let v; {{ if ne $type "boolean" }}value: expectedValue; {{ end }}else: elseTemplate; initializing: initTemplate; reconciling: reconcilingTemplate">
+ * <div *{{ .Key | ToCamel }}FeatureFlag="let v; {{ if ne $type "boolean" }}value: expectedValue; {{ end }}else: elseTemplate; initializing: initTemplate; reconciling: reconcilingTemplate">
  *   Content shown when flag is {{ if eq $type "boolean" }}enabled{{ else }}matched{{ end }}.
  * </div>
  * ```
@@ -158,7 +158,7 @@ export class GeneratedFeatureFlagService {
  * @example
  * Simple `*` usage (no else/initializing/reconciling)
  * ```html
- * <div *{{ .Key | ToCamel }}="let v">
+ * <div *{{ .Key | ToCamel }}FeatureFlag="let v">
  *   Content shown when flag is {{ if eq $type "boolean" }}enabled{{ else }}matched{{ end }}.
  * </div>
  * ```
@@ -169,12 +169,12 @@ export class GeneratedFeatureFlagService {
  * `let v` or `let details = evaluationDetails` (or `let _` if you do not need the value)
  * before any `else`/`initializing`/`reconciling`/`default` segments.
  * This is an Angular microsyntax parsing constraint, not a directive limitation.
- * `*{{ .Key | ToCamel }}="else elseTemplate"` will not parse because `else` is a
+ * `*{{ .Key | ToCamel }}FeatureFlag="else elseTemplate"` will not parse because `else` is a
  * secondary segment. If you do not need the value, use `let _`, or use the
  * explicit `ng-template` form above.
  */
 @Directive({
-  selector: '[{{ .Key | ToCamel }}]',
+  selector: '[{{ .Key | ToCamel }}FeatureFlag]',
   standalone: true,
 })
 export class {{ .Key | ToPascal }}FeatureFlagDirective extends FeatureFlagDirective<{{ if eq $type "object" }}JsonValue{{ else }}{{ $type }}{{ end }}> implements OnChanges {
@@ -187,7 +187,7 @@ export class {{ .Key | ToPascal }}FeatureFlagDirective extends FeatureFlagDirect
   /**
    * The expected value of this {{ $type }} feature flag, for which the `then` template should be rendered.
    */
-  @Input({ required: false }) {{ .Key | ToCamel }}Value?: {{ if eq $type "object" }}JsonValue{{ else }}{{ $type }}{{ end }};
+  @Input({ required: false }) {{ .Key | ToCamel }}FeatureFlagValue?: {{ if eq $type "object" }}JsonValue{{ else }}{{ $type }}{{ end }};
 {{- end }}
 
   constructor() {
@@ -205,7 +205,7 @@ export class {{ .Key | ToPascal }}FeatureFlagDirective extends FeatureFlagDirect
   override ngOnChanges() {
     super.ngOnChanges();
 
-    this._featureFlagValue = this.{{ .Key | ToCamel }}Value;
+    this._featureFlagValue = this.{{ .Key | ToCamel }}FeatureFlagValue;
   }
 {{- end }}
 
@@ -213,7 +213,7 @@ export class {{ .Key | ToPascal }}FeatureFlagDirective extends FeatureFlagDirect
    * The domain of the {{ $type }} feature flag.
    */
   @Input({ required: false })
-  set {{ .Key | ToCamel }}Domain(domain: string | undefined) {
+  set {{ .Key | ToCamel }}FeatureFlagDomain(domain: string | undefined) {
     super.featureFlagDomain = domain;
   }
 
@@ -224,7 +224,7 @@ export class {{ .Key | ToPascal }}FeatureFlagDirective extends FeatureFlagDirect
    * Defaults to true.
    */
   @Input({ required: false })
-  set {{ .Key | ToCamel }}UpdateOnConfigurationChanged(enabled: boolean | undefined) {
+  set {{ .Key | ToCamel }}FeatureFlagUpdateOnConfigurationChanged(enabled: boolean | undefined) {
     this._updateOnConfigurationChanged = enabled ?? true;
   }
 
@@ -235,7 +235,7 @@ export class {{ .Key | ToPascal }}FeatureFlagDirective extends FeatureFlagDirect
    * Defaults to true.
    */
   @Input({ required: false })
-  set {{ .Key | ToCamel }}UpdateOnContextChanged(enabled: boolean | undefined) {
+  set {{ .Key | ToCamel }}FeatureFlagUpdateOnContextChanged(enabled: boolean | undefined) {
     this._updateOnContextChanged = enabled ?? true;
   }
 
@@ -243,7 +243,7 @@ export class {{ .Key | ToPascal }}FeatureFlagDirective extends FeatureFlagDirect
    * Template to be displayed when the feature flag {{ if eq $type "boolean" }}is false{{ else }}does not match value{{ end }}.
    */
   @Input()
-  set {{ .Key | ToCamel }}Else(tpl: TemplateRef<FeatureFlagDirectiveContext<{{ if eq $type "object" }}JsonValue{{ else }}{{ $type }}{{ end }}>>) {
+  set {{ .Key | ToCamel }}FeatureFlagElse(tpl: TemplateRef<FeatureFlagDirectiveContext<{{ if eq $type "object" }}JsonValue{{ else }}{{ $type }}{{ end }}>>) {
     this._elseTemplateRef = tpl;
   }
 
@@ -251,7 +251,7 @@ export class {{ .Key | ToPascal }}FeatureFlagDirective extends FeatureFlagDirect
    * Template to be displayed when the provider is not ready.
    */
   @Input()
-  set {{ .Key | ToCamel }}Initializing(tpl: TemplateRef<FeatureFlagDirectiveContext<{{ if eq $type "object" }}JsonValue{{ else }}{{ $type }}{{ end }}>>) {
+  set {{ .Key | ToCamel }}FeatureFlagInitializing(tpl: TemplateRef<FeatureFlagDirectiveContext<{{ if eq $type "object" }}JsonValue{{ else }}{{ $type }}{{ end }}>>) {
     this._initializingTemplateRef = tpl;
   }
 
@@ -259,7 +259,7 @@ export class {{ .Key | ToPascal }}FeatureFlagDirective extends FeatureFlagDirect
    * Template to be displayed when the provider is reconciling.
    */
   @Input()
-  set {{ .Key | ToCamel }}Reconciling(tpl: TemplateRef<FeatureFlagDirectiveContext<{{ if eq $type "object" }}JsonValue{{ else }}{{ $type }}{{ end }}>>) {
+  set {{ .Key | ToCamel }}FeatureFlagReconciling(tpl: TemplateRef<FeatureFlagDirectiveContext<{{ if eq $type "object" }}JsonValue{{ else }}{{ $type }}{{ end }}>>) {
     this._reconcilingTemplateRef = tpl;
   }
 }
diff --git a/test/angular-integration/specs/directives.spec.ts b/test/angular-integration/specs/directives.spec.ts
index cd6ef5c..5f646ab 100644
--- a/test/angular-integration/specs/directives.spec.ts
+++ b/test/angular-integration/specs/directives.spec.ts
@@ -21,7 +21,7 @@ import type { JsonValue } from "@openfeature/angular-sdk";
   imports: [EnableFeatureAFeatureFlagDirective],
   template: `
     <div class="container">
-      <ng-container *enableFeatureA="let value; domain: domain">
+      <ng-container *enableFeatureAFeatureFlag="let value; domain: domain">
         <div class="flag-content">Feature A is enabled</div>
       </ng-container>
     </div>
@@ -38,7 +38,7 @@ class TestBooleanComponent {
   imports: [EnableFeatureAFeatureFlagDirective],
   template: `
     <div class="container">
-      <div class="flag-content" *enableFeatureA>
+      <div class="flag-content" *enableFeatureAFeatureFlag>
         Feature A is enabled
       </div>
     </div>
@@ -54,7 +54,7 @@ class TestBooleanSimpleComponent {
   imports: [GreetingMessageFeatureFlagDirective],
   template: `
     <div class="container">
-      <ng-container *greetingMessage="let value; domain: domain">
+      <ng-container *greetingMessageFeatureFlag="let value; domain: domain">
         <div class="flag-content">Greeting: {{ value }}</div>
       </ng-container>
     </div>
@@ -71,7 +71,7 @@ class TestStringComponent {
   imports: [DiscountPercentageFeatureFlagDirective],
   template: `
     <div class="container">
-      <ng-container *discountPercentage="let value; domain: domain">
+      <ng-container *discountPercentageFeatureFlag="let value; domain: domain">
         <div class="flag-content">Discount: {{ value }}</div>
       </ng-container>
     </div>
@@ -88,7 +88,7 @@ class TestNumberComponent {
   imports: [UsernameMaxLengthFeatureFlagDirective],
   template: `
     <div class="container">
-      <ng-container *usernameMaxLength="let value; domain: domain">
+      <ng-container *usernameMaxLengthFeatureFlag="let value; domain: domain">
         <div class="flag-content">Max Length: {{ value }}</div>
       </ng-container>
     </div>
@@ -105,7 +105,7 @@ class TestUsernameComponent {
   imports: [ThemeCustomizationFeatureFlagDirective, JsonPipe],
   template: `
     <div class="container">
-      <ng-container *themeCustomization="let value; domain: domain">
+      <ng-container *themeCustomizationFeatureFlag="let value; domain: domain">
         <div class="flag-content">Theme: {{ value | json }}</div>
       </ng-container>
     </div>
@@ -122,27 +122,27 @@ class TestObjectComponent {
   imports: [GeneratedFeatureFlagDirectives],
   template: `
     <div class="boolean-flag">
-      <ng-container *enableFeatureA="let v; domain: domain">
+      <ng-container *enableFeatureAFeatureFlag="let v; domain: domain">
         <div class="flag-content">Boolean flag: {{ v }}</div>
       </ng-container>
     </div>
     <div class="string-flag">
-      <ng-container *greetingMessage="let v; domain: domain">
+      <ng-container *greetingMessageFeatureFlag="let v; domain: domain">
         <div class="flag-content">String flag: {{ v }}</div>
       </ng-container>
     </div>
     <div class="number-flag">
-      <ng-container *discountPercentage="let v; domain: domain">
+      <ng-container *discountPercentageFeatureFlag="let v; domain: domain">
         <div class="flag-content">Number flag: {{ v }}</div>
       </ng-container>
     </div>
     <div class="username-flag">
-      <ng-container *usernameMaxLength="let v; domain: domain">
+      <ng-container *usernameMaxLengthFeatureFlag="let v; domain: domain">
         <div class="flag-content">Username flag: {{ v }}</div>
       </ng-container>
     </div>
     <div class="object-flag">
-      <ng-container *themeCustomization="let v; domain: domain">
+      <ng-container *themeCustomizationFeatureFlag="let v; domain: domain">
         <div class="flag-content">Object flag</div>
       </ng-container>
     </div>
@@ -160,7 +160,7 @@ class TestAllDirectivesComponent {
   template: `
     <div class="container">
       <ng-container
-        *enableFeatureA="let v; domain: domain; else: enableFeatureAElse"
+        *enableFeatureAFeatureFlag="let v; domain: domain; else: enableFeatureAElse"
       >
         <div class="flag-content">Feature A is enabled</div>
       </ng-container>
@@ -182,7 +182,7 @@ class TestBooleanElseComponent {
   template: `
     <div class="container">
       <ng-container
-        *greetingMessage="
+        *greetingMessageFeatureFlag="
           let v;
           domain: domain;
           value: expectedValue;
@@ -210,7 +210,7 @@ class TestStringValueComponent {
   template: `
     <div class="container">
       <ng-container
-        *discountPercentage="
+        *discountPercentageFeatureFlag="
           let v;
           domain: domain;
           value: expectedValue;
@@ -238,7 +238,7 @@ class TestNumberValueComponent {
   template: `
     <div class="container">
       <ng-container
-        *usernameMaxLength="
+        *usernameMaxLengthFeatureFlag="
           let v;
           domain: domain;
           value: expectedValue;
@@ -266,7 +266,7 @@ class TestUsernameValueComponent {
   template: `
     <div class="container">
       <ng-container
-        *themeCustomization="
+        *themeCustomizationFeatureFlag="
           let v;
           domain: domain;
           value: expectedValue;
diff --git a/test/angular-integration/specs/ngtsc-compile.spec.ts b/test/angular-integration/specs/ngtsc-compile.spec.ts
index 6cf90d8..50be9f4 100644
--- a/test/angular-integration/specs/ngtsc-compile.spec.ts
+++ b/test/angular-integration/specs/ngtsc-compile.spec.ts
@@ -97,7 +97,7 @@ import { EnableFeatureAFeatureFlagDirective } from "@generated/openfeature.gener
   selector: "test-host",
   imports: [EnableFeatureAFeatureFlagDirective],
   template: \`
-    <ng-template enableFeatureA>
+    <ng-template enableFeatureAFeatureFlag>
       <div>Feature A enabled</div>
     </ng-template>
   \`,
@@ -120,8 +120,8 @@ import { EnableFeatureAFeatureFlagDirective } from "@generated/openfeature.gener
     <ng-template #elseTemplate>Else</ng-template>
 
     <ng-template
-      enableFeatureA
-      [enableFeatureAElse]="elseTemplate">
+      enableFeatureAFeatureFlag
+      [enableFeatureAFeatureFlagElse]="elseTemplate">
       <div>Feature A enabled</div>
     </ng-template>
   \`,
@@ -141,7 +141,7 @@ import { EnableFeatureAFeatureFlagDirective } from "@generated/openfeature.gener
   selector: "test-host",
   imports: [EnableFeatureAFeatureFlagDirective],
   template: \`
-    <div *enableFeatureA>Feature A enabled</div>
+    <div *enableFeatureAFeatureFlag>Feature A enabled</div>
   \`,
 })
 export class SimpleMicrosyntaxHostComponent {}
@@ -164,7 +164,7 @@ import { GreetingMessageFeatureFlagDirective } from "@generated/openfeature.gene
     <ng-template #reconcilingTemplate>Reconciling</ng-template>
 
     <div
-      *greetingMessage="let value; let details = evaluationDetails; default: expectedValue; else: elseTemplate; initializing: initTemplate; reconciling: reconcilingTemplate">
+      *greetingMessageFeatureFlag="let value; let details = evaluationDetails; default: expectedValue; else: elseTemplate; initializing: initTemplate; reconciling: reconcilingTemplate">
       Flag value: {{ value }}
     </div>
   \`,
@@ -196,7 +196,7 @@ export class CustomWidgetComponent {
   imports: [CustomWidgetComponent, GreetingMessageFeatureFlagDirective],
   template: 
     \`<custom-widget
-      *greetingMessage=\"let value; default: expectedValue\"
+      *greetingMessageFeatureFlag=\"let value; default: expectedValue\"
       [label]=\"value\">
     </custom-widget>\`,
 })