adjust key

Author: nartc

libs/core/src/lib/canvas.ts

@@ -9,10 +9,7 @@ import {
 	Injector,
 	Input,
 	NgZone,
-	OnChanges,
-	OnInit,
 	Output,
-	SimpleChanges,
 	ViewChild,
 	ViewContainerRef,
 	computed,
@@ -21,6 +18,9 @@ import {
 	inject,
 	type ComponentRef,
 	type EffectRef,
+	type OnChanges,
+	type OnInit,
+	type SimpleChanges,
 	type Type,
 } from '@angular/core';
 import { NgxResize, provideNgxResizeOptions, type NgxResizeResult } from 'ngx-resize';
@@ -233,7 +233,7 @@ export class NgtCanvas implements OnInit, OnChanges {
 	}
 
 	ngOnInit() {
-		// NOTE: we resolve glCanvas now, setup the configurator
+		// NOTE: we resolve glCanvas at this point, setup the configurator
 		this.configurator = this.initRoot(this.glCanvas.nativeElement);
 
 		this.destroyRef.onDestroy(() => {
@@ -245,7 +245,7 @@ export class NgtCanvas implements OnInit, OnChanges {
 		});
 	}
 
-	// NOTE: runs outside of Zone due to emitInZone
+	// NOTE: runs outside of Zone due to emitInZone: false
 	onResize(result: NgxResizeResult) {
 		if (result.width > 0 && result.height > 0) {
 			this.resizeEffectRef?.destroy();
@@ -261,7 +261,7 @@ export class NgtCanvas implements OnInit, OnChanges {
 							this.configurator.configure({ ...inputs(), size: result });
 
 							if (this.glRef) {
-								this.glRef.changeDetectorRef.detectChanges();
+								this.cdr.detectChanges();
 							} else {
 								this.render();
 							}

libs/core/src/lib/directives/common.ts

@@ -12,6 +12,8 @@ import { safeDetectChanges } from '../utils/safe-detect-changes';
 
 @Directive()
 export abstract class NgtCommonDirective {
+	protected static processComment = true;
+
 	private vcr = inject(ViewContainerRef);
 	private zone = inject(NgZone);
 	private template = inject(TemplateRef);
@@ -21,10 +23,12 @@ export abstract class NgtCommonDirective {
 	private view?: EmbeddedViewRef<unknown>;
 
 	constructor() {
-		const commentNode = this.vcr.element.nativeElement;
-		if (commentNode[SPECIAL_INTERNAL_ADD_COMMENT]) {
-			commentNode[SPECIAL_INTERNAL_ADD_COMMENT]();
-			delete commentNode[SPECIAL_INTERNAL_ADD_COMMENT];
+		if (NgtCommonDirective.processComment) {
+			const commentNode = this.vcr.element.nativeElement;
+			if (commentNode[SPECIAL_INTERNAL_ADD_COMMENT]) {
+				commentNode[SPECIAL_INTERNAL_ADD_COMMENT]();
+				delete commentNode[SPECIAL_INTERNAL_ADD_COMMENT];
+			}
 		}
 
 		inject(DestroyRef).onDestroy(() => {

libs/core/src/lib/directives/key.ts

@@ -1,46 +1,21 @@
-import {
-	DestroyRef,
-	Directive,
-	Input,
-	NgZone,
-	TemplateRef,
-	ViewContainerRef,
-	inject,
-	type EmbeddedViewRef,
-} from '@angular/core';
-import { safeDetectChanges } from '../utils/safe-detect-changes';
+import { Directive, Input } from '@angular/core';
+import { NgtCommonDirective } from './common';
 
 @Directive({ selector: 'ng-template[key]', standalone: true })
-export class NgtKey {
-	private vcr = inject(ViewContainerRef);
-	private templateRef = inject(TemplateRef);
-	private zone = inject(NgZone);
+export class NgtKey extends NgtCommonDirective {
+	static override processComment = false;
 
 	private lastKey = '';
-	private viewRef?: EmbeddedViewRef<unknown>;
+
+	override validate(): boolean {
+		return false;
+	}
 
 	@Input() set key(key: string | number | object) {
-		const normalizedKey = key.toString();
+		const normalizedKey = JSON.stringify(key);
 		if (this.lastKey !== normalizedKey) {
-			this.createView();
 			this.lastKey = normalizedKey;
+			this.createView();
 		}
 	}
-
-	constructor() {
-		inject(DestroyRef).onDestroy(() => {
-			this.viewRef?.destroy();
-		});
-	}
-
-	private createView() {
-		if (!this.viewRef?.destroyed) {
-			this.viewRef?.destroy();
-		}
-
-		this.zone.runOutsideAngular(() => {
-			this.viewRef = this.vcr.createEmbeddedView(this.templateRef);
-			safeDetectChanges(this.viewRef);
-		});
-	}
 }