fix(angular): fix race condition on initialization (#1052)

<!-- Please use this template for your pull request. -->
<!-- Please use the sections that you need and delete other sections -->

## This PR
<!-- add the description of the PR here -->

Fixes a race condition when the directive is first rendered.
Initially the initialization code in the constructor before the
`@Input`s were bound to the variables.
This meant that in some cases providers were called with `undefined` as
flag key, which most providers accept, but for flipt-web the engine
paniced due to the value being `unit` instead of a string.

---------

Signed-off-by: Lukas Reining <[email protected]>

packages/angular/projects/angular-sdk/src/lib/feature-flag.directive.ts

@@ -5,6 +5,7 @@ import {
   Input,
   OnChanges,
   OnDestroy,
+  OnInit,
   TemplateRef,
   ViewContainerRef,
 } from '@angular/core';
@@ -33,7 +34,7 @@ class FeatureFlagDirectiveContext<T extends FlagValue> {
   standalone: true,
   selector: '[featureFlag]',
 })
-export abstract class FeatureFlagDirective<T extends FlagValue> implements OnDestroy, OnChanges {
+export abstract class FeatureFlagDirective<T extends FlagValue> implements OnInit, OnDestroy, OnChanges {
   protected _featureFlagDefault: T;
   protected _featureFlagDomain: string | undefined;
 
@@ -69,14 +70,21 @@ export abstract class FeatureFlagDirective<T extends FlagValue> implements OnDes
     templateRef: TemplateRef<FeatureFlagDirectiveContext<T>>,
   ) {
     this._thenTemplateRef = templateRef;
-    this.initClient();
   }
 
   set featureFlagDomain(domain: string | undefined) {
+    /**
+     * We have to handle the change of the domain explicitly because we need to get a new client when the domain changes.
+     * This can not be done if we simply relay the onChanges method.
+     */
     this._featureFlagDomain = domain;
     this.initClient();
   }
 
+  ngOnInit(): void {
+    this.initClient();
+  }
+
   ngOnChanges(): void {
     this._flagChangeHandler?.();
   }
@@ -200,7 +208,7 @@ export abstract class FeatureFlagDirective<T extends FlagValue> implements OnDes
  * Usage examples:
  *
  * ```
- * <div *booleanFeatureFlag="'flagKey'; default: 0; let value">{{ value }}</div>
+ * <div *booleanFeatureFlag="'flagKey'; default: false; let value">{{ value }}</div>
  * ```
  * ```
  * <div *booleanFeatureFlag="flagKey; default: false; else: elseTemplate">Content to render when flag is true.</div>