fix(template): use constructor injection for templateRef. fixes #1616

hoebbelsB · hoebbelsB · commit 25eed84f9252 · 2024-02-16T23:46:35.000+01:00
Multiple users reported the issue that their IDE cannot infer the typings from our structural directives due to the `inject` method. Using the constructor based injection solves that issue
diff --git a/libs/template/experimental/virtual-scrolling/src/lib/virtual-for.directive.ts b/libs/template/experimental/virtual-scrolling/src/lib/virtual-for.directive.ts
@@ -200,9 +200,6 @@ export class RxVirtualFor<T, U extends NgIterable<T> = NgIterable<T>>
   private readonly iterableDiffers = inject(IterableDiffers);
   private readonly cdRef = inject(ChangeDetectorRef);
   private readonly ngZone = inject(NgZone);
-  private readonly templateRef = inject(
-    TemplateRef<RxVirtualForViewContext<T, U>>
-  );
   readonly viewContainer = inject(ViewContainerRef);
   private readonly strategyProvider = inject(RxStrategyProvider);
   private readonly errorHandler = inject(ErrorHandler);
@@ -595,6 +592,10 @@ export class RxVirtualFor<T, U extends NgIterable<T> = NgIterable<T>>
     return true;
   }
 
+  constructor(
+    private readonly templateRef: TemplateRef<RxVirtualForViewContext<T, U>>
+  ) {}
+
   /** @internal */
   ngOnInit() {
     this.values$.pipe(takeUntil(this._destroy$)).subscribe((values) => {
diff --git a/libs/template/for/src/lib/for.directive.ts b/libs/template/for/src/lib/for.directive.ts
@@ -89,9 +89,6 @@ export class RxFor<T, U extends NgIterable<T> = NgIterable<T>>
   /** @internal */
   private ngZone = inject(NgZone);
   /** @internal */
-  private templateRef =
-    inject<TemplateRef<RxForViewContext<T, U>>>(TemplateRef);
-  /** @internal */
   private viewContainerRef = inject(ViewContainerRef);
   /** @internal */
   private strategyProvider = inject(RxStrategyProvider);
@@ -434,6 +431,10 @@ export class RxFor<T, U extends NgIterable<T> = NgIterable<T>>
   /** @internal */
   _distinctBy = (a: T, b: T) => a === b;
 
+  constructor(
+    private readonly templateRef: TemplateRef<RxForViewContext<T, U>>
+  ) {}
+
   /** @internal */
   ngOnInit() {
     this._subscription.add(this.values$.subscribe((v) => (this.values = v)));
diff --git a/libs/template/if/src/lib/if.directive.ts b/libs/template/if/src/lib/if.directive.ts
@@ -77,8 +77,6 @@ export class RxIf<T = unknown>
   /** @internal */
   private ngZone = inject(NgZone);
   /** @internal */
-  private templateRef = inject<TemplateRef<RxIfViewContext<T>>>(TemplateRef);
-  /** @internal */
   private viewContainerRef = inject(ViewContainerRef);
 
   /** @internal */
@@ -489,6 +487,8 @@ export class RxIf<T = unknown>
     return this.then ? this.then : this.templateRef;
   }
 
+  constructor(private readonly templateRef: TemplateRef<RxIfViewContext<T>>) {}
+
   /** @internal */
   ngOnInit() {
     this.subscription.add(
diff --git a/libs/template/let/src/lib/let.directive.ts b/libs/template/let/src/lib/let.directive.ts
@@ -103,9 +103,6 @@ export class RxLet<U> implements OnInit, OnDestroy, OnChanges {
   /** @internal */
   private ngZone = inject(NgZone);
   /** @internal */
-  private nextTemplateRef =
-    inject<TemplateRef<RxLetViewContext<U>>>(TemplateRef);
-  /** @internal */
   private viewContainerRef = inject(ViewContainerRef);
   /** @internal */
   private errorHandler = inject(ErrorHandler);
@@ -525,6 +522,8 @@ export class RxLet<U> implements OnInit, OnDestroy, OnChanges {
     return true;
   }
 
+  constructor(private templateRef: TemplateRef<RxLetViewContext<U>>) {}
+
   /** @internal */
   ngOnInit() {
     this.subscription.add(
@@ -618,7 +617,7 @@ export class RxLet<U> implements OnInit, OnDestroy, OnChanges {
 
     this.templateManager.addTemplateRef(
       RxLetTemplateNames.next,
-      this.nextTemplateRef
+      this.templateRef
     );
     this.templateManager.nextStrategy(this.strategyHandler.values$);
   }
