From e67301d9fabbd8f1d1cd3281a80338d60338c6c3 Mon Sep 17 00:00:00 2001
From: Gaylord Oudry <gaylord@pc53.home>
Date: Thu, 2 Jan 2025 22:31:07 +0100
Subject: [PATCH 1/6] evo(angular): Add ngFor control syntax snippets for
 Angular 17+ version

---
 snippets/frameworks/angular/html.json | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/snippets/frameworks/angular/html.json b/snippets/frameworks/angular/html.json
index 7c70d30f..b3f75c2a 100644
--- a/snippets/frameworks/angular/html.json
+++ b/snippets/frameworks/angular/html.json
@@ -29,6 +29,26 @@
     "body": ["*ngFor=\"let ${1:item} of ${2:stream} | async as ${3:list}\"${0}"],
     "description": "Angular *ngForAsync"
   },
+  "ngForNext": {
+    "prefix": "a-ngForNext",
+    "body": [
+        "@for (${1:item} of ${2:items}; track ${3:trackBy}) {", 
+        "\t${0:content}",
+        "}"
+    ],
+    "description": "Angular new control flow syntax ngFor"
+  },
+  "ngForEmptyNext": {
+    "prefix": "a-ngForEmptyNext",
+    "body": [
+        "@for (${1:item} of ${2:items}; track ${3:trackBy}) {",
+        "\t${4:forBlock}",
+        "} @empty {",
+        "\t${0:emptyBlock}",
+        "}"
+    ],
+    "description": "Angular new control flow syntax ngFor with empty block"
+  },
   "ngForm": {
     "prefix": "a-form",
     "body": ["<form (ngSubmit)=\"onSubmit()\" #${1:form}=\"ngForm\">", "</form>"],

From 4fc1196979a13c5c6836173c0e8ad5128008e604 Mon Sep 17 00:00:00 2001
From: Gaylord Oudry <gaylord@pc53.home>
Date: Fri, 3 Jan 2025 11:04:43 +0100
Subject: [PATCH 2/6] evo(angular): Add consistency in parameter naming

---
 snippets/frameworks/angular/html.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/snippets/frameworks/angular/html.json b/snippets/frameworks/angular/html.json
index b3f75c2a..71ff584d 100644
--- a/snippets/frameworks/angular/html.json
+++ b/snippets/frameworks/angular/html.json
@@ -33,7 +33,7 @@
     "prefix": "a-ngForNext",
     "body": [
         "@for (${1:item} of ${2:items}; track ${3:trackBy}) {", 
-        "\t${0:content}",
+        "\t${0:forBlock}",
         "}"
     ],
     "description": "Angular new control flow syntax ngFor"

From 2af202bff977918ef5f9071b85023ee192e14db5 Mon Sep 17 00:00:00 2001
From: Gaylord Oudry <gaylord@pc53.home>
Date: Fri, 3 Jan 2025 11:24:13 +0100
Subject: [PATCH 3/6] evo(angular): Add ngIf control syntax snippets for
 Angular 17+

---
 snippets/frameworks/angular/html.json | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/snippets/frameworks/angular/html.json b/snippets/frameworks/angular/html.json
index 71ff584d..eda384b9 100644
--- a/snippets/frameworks/angular/html.json
+++ b/snippets/frameworks/angular/html.json
@@ -89,6 +89,26 @@
     "body": ["*ngIf=\"${1:expression};else ${2:templateName}\""],
     "description": "Angular *ngIfElse"
   },
+  "ngIfNext": {
+    "prefix": "a-ngIfNext",\
+    "body": [
+        "@if (${1:expression}) {",
+        "\t${0:ifBlock}",
+        "}"
+    ],
+    "description": "Angular new control flow syntax for ngIf"
+  },
+  "ngIfElseNext": {
+    "prefix": "a-ngIfElseNext",\
+    "body": [
+        "@if (${1:expression}) {",
+        "\t${2:ifBlock}",
+        "} @else {",
+        "\t${0:elseBlock}",
+        "}"
+    ],
+    "description": "Angular new control flow syntax for ngIf"
+  },
   "ngModel": {
     "prefix": "a-ngModel",
     "body": ["[(ngModel)]=\"${1:binding}\""],

From 735177e569a46a2f08b4da5828b9a9801c5f5cbb Mon Sep 17 00:00:00 2001
From: Gaylord Oudry <gaylord@pc53.home>
Date: Fri, 3 Jan 2025 12:30:31 +0100
Subject: [PATCH 4/6] evo(angular): Add ngSwitch control syntax snippet for
 Angular17+

---
 snippets/frameworks/angular/html.json | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/snippets/frameworks/angular/html.json b/snippets/frameworks/angular/html.json
index eda384b9..2a5bba6b 100644
--- a/snippets/frameworks/angular/html.json
+++ b/snippets/frameworks/angular/html.json
@@ -151,6 +151,20 @@
     ],
     "description": "Angular ngSwitch"
   },
+  "ngSwitchNew": {
+    "prefix": "a-ngSwitchNext",
+    "body": [
+        "@switch (${1:expression}) {",
+        "\t@case (${2:case}) {",
+        "\t\t${3:caseBlock}",
+        "\t}${0}",
+        "\t@default {",
+        "\t\t${4:defaultBlock}",
+        "\t}",
+        "}"
+    ],
+    "description": "Angular new control flow syntax for ngSwitch"
+  },
   "pre w/ json": {
     "prefix": "a-prej",
     "body": ["<pre>{{${1:model} | json}}</pre>$0"],

From 226c04e2e50621bd9f66fac334a9faa8320ece37 Mon Sep 17 00:00:00 2001
From: Gaylord Oudry <gaylord@pc53.home>
Date: Fri, 3 Jan 2025 19:19:59 +0100
Subject: [PATCH 5/6] evo(angular): Add signals snippets

---
 snippets/frameworks/angular/typescript.json | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/snippets/frameworks/angular/typescript.json b/snippets/frameworks/angular/typescript.json
index 621143a1..26da5f06 100644
--- a/snippets/frameworks/angular/typescript.json
+++ b/snippets/frameworks/angular/typescript.json
@@ -616,5 +616,15 @@
     "prefix": "a-trackby",
     "description": "TrackBy Function",
     "body": ["${1:trackBy}(index: number, ${2:name}: ${3:model}): ${4:number} {", "  return ${2:name}${5:.id};$0", "}"]
+  },
+  "Angular Writable Signal": {
+    "prefix": "a-signal",
+    "body": ["${1:variable}: WritableSignal<${2:T}> = signal(${3:defaultValue});${0}"],
+    "description": "Angular Writable Signal"
+  },
+  "Angular Computed Signal": {
+    "prefix": "a-computedSignal",
+    "body": ["${1:variable}: Signal<${2:T}> = computed(() => ${3:expression});${0}"],
+    "description": "Angular Writable Signal"
   }
 }

From 4bec05327fc7cef674d6c160da850d2059a99e17 Mon Sep 17 00:00:00 2001
From: Gaylord Oudry <gaylord@gaylords-air.home>
Date: Mon, 21 Apr 2025 16:54:10 +0200
Subject: [PATCH 6/6] fix(angular): Resolve PR comment

---
 snippets/frameworks/angular/html.json | 391 +++++++++++++-------------
 1 file changed, 200 insertions(+), 191 deletions(-)

diff --git a/snippets/frameworks/angular/html.json b/snippets/frameworks/angular/html.json
index 2a5bba6b..466c9e29 100644
--- a/snippets/frameworks/angular/html.json
+++ b/snippets/frameworks/angular/html.json
@@ -1,193 +1,202 @@
 {
-  "class": {
-    "prefix": "a-class",
-    "body": ["[class]=\"${1:expression}\""],
-    "description": "Angular [class] binding"
-  },
-  "style": {
-    "prefix": "a-style",
-    "body": ["[style.${1:property}]=\"${2:expression}\""],
-    "description": "Angular [style] binding"
-  },
-  "ngClass": {
-    "prefix": "a-ngClass",
-    "body": ["[ngClass]=\"{${1:cssClass}: ${2:expression}}\""],
-    "description": "Angular ngClass"
-  },
-  "ngFor": {
-    "prefix": "a-ngFor",
-    "body": ["*ngFor=\"let ${1:item} of ${2:list}\"${0}"],
-    "description": "Angular *ngFor"
-  },
-  "ngFor with trackBy": {
-    "prefix": "a-ngFor-trackBy",
-    "body": ["*ngFor=\"let ${1:item} of ${2:list}; trackBy:${1:item}.id\"${0}"],
-    "description": "Angular *ngFor with trackBy"
-  },
-  "ngForAsync": {
-    "prefix": "a-ngForAsync",
-    "body": ["*ngFor=\"let ${1:item} of ${2:stream} | async as ${3:list}\"${0}"],
-    "description": "Angular *ngForAsync"
-  },
-  "ngForNext": {
-    "prefix": "a-ngForNext",
-    "body": [
-        "@for (${1:item} of ${2:items}; track ${3:trackBy}) {", 
-        "\t${0:forBlock}",
-        "}"
-    ],
-    "description": "Angular new control flow syntax ngFor"
-  },
-  "ngForEmptyNext": {
-    "prefix": "a-ngForEmptyNext",
-    "body": [
-        "@for (${1:item} of ${2:items}; track ${3:trackBy}) {",
-        "\t${4:forBlock}",
-        "} @empty {",
-        "\t${0:emptyBlock}",
-        "}"
-    ],
-    "description": "Angular new control flow syntax ngFor with empty block"
-  },
-  "ngForm": {
-    "prefix": "a-form",
-    "body": ["<form (ngSubmit)=\"onSubmit()\" #${1:form}=\"ngForm\">", "</form>"],
-    "description": "Form with ngSubmit and form attributes"
-  },
-  "ngFormArrayName": {
-    "prefix": "a-formArrayName",
-    "body": ["formArrayName=\"${1:control}\""],
-    "description": "Angular formArrayName"
-  },
-  "ngFormControlName": {
-    "prefix": "a-formControlName",
-    "body": ["formControlName=\"${1:control}\""],
-    "description": "Angular formControlName"
-  },
-  "ngFormGroup": {
-    "prefix": "a-formGroup",
-    "body": ["[formGroup]=\"${1:form}\""],
-    "description": "Angular formGroup"
-  },
-  "ngFormGroupName": {
-    "prefix": "a-formGroupName",
-    "body": ["[formGroupName]=\"${1:name}\""],
-    "description": "Angular formGroupName"
-  },
-  "ngFormSubmit": {
-    "prefix": "a-form-submit",
-    "body": ["<button type=\"submit\" [disabled]=\"!${1:form}.form.valid\">", "\tSave", "</button>"],
-    "description": "Angular form submit"
-  },
-  "ngIf": {
-    "prefix": "a-ngIf",
-    "body": ["*ngIf=\"${1:expression}\""],
-    "description": "Angular *ngIf"
-  },
-  "ngIfElse": {
-    "prefix": "a-ngIfElse",
-    "body": ["*ngIf=\"${1:expression};else ${2:templateName}\""],
-    "description": "Angular *ngIfElse"
-  },
-  "ngIfNext": {
-    "prefix": "a-ngIfNext",\
-    "body": [
-        "@if (${1:expression}) {",
-        "\t${0:ifBlock}",
-        "}"
-    ],
-    "description": "Angular new control flow syntax for ngIf"
-  },
-  "ngIfElseNext": {
-    "prefix": "a-ngIfElseNext",\
-    "body": [
-        "@if (${1:expression}) {",
-        "\t${2:ifBlock}",
-        "} @else {",
-        "\t${0:elseBlock}",
-        "}"
-    ],
-    "description": "Angular new control flow syntax for ngIf"
-  },
-  "ngModel": {
-    "prefix": "a-ngModel",
-    "body": ["[(ngModel)]=\"${1:binding}\""],
-    "description": "Angular ngModel"
-  },
-  "ngRouterLink": {
-    "prefix": "a-routerLink",
-    "body": ["[routerLink]=\"['/${1:routePath}']\" routerLinkActive=\"${2:router-link-active}\" $0"],
-    "description": "Angular routerLink"
-  },
-  "ngRouterLinkWithParameter": {
-    "prefix": "a-routerLink-param",
-    "body": [
-      "[routerLink]=\"['${1:routePath}', ${2:routeParameterValue}]\"",
-      "routerLinkActive=\"${3:router-link-active}\"$0"
-    ],
-    "description": "Angular routerLink with a route parameter"
-  },
-  "ngSelect": {
-    "prefix": "a-select",
-    "body": [
-      "<select [(ngModel)]=\"${1:model}\">",
-      "\t<option *ngFor=\"let ${2:item} of ${3:list}\" [value]=\"${2:item}\">{{${2:item}}}</option>",
-      "</select>"
-    ],
-    "description": "<select> control with ngModel"
-  },
-  "ngStyle": {
-    "prefix": "a-ngStyle",
-    "body": ["[ngStyle]=\"{${1:style}: ${2:expression}}\""],
-    "description": "Angular ngStyle"
-  },
-  "ngSwitch": {
-    "prefix": "a-ngSwitch",
-    "body": [
-      "<div [ngSwitch]=\"${1:conditionExpression}\">",
-      "\t<div *ngSwitchCase=\"${2:expression}\">${3:output}</div>",
-      "\t<div *ngSwitchDefault>${4:output2}</div>",
-      "</div>"
-    ],
-    "description": "Angular ngSwitch"
-  },
-  "ngSwitchNew": {
-    "prefix": "a-ngSwitchNext",
-    "body": [
-        "@switch (${1:expression}) {",
-        "\t@case (${2:case}) {",
-        "\t\t${3:caseBlock}",
-        "\t}${0}",
-        "\t@default {",
-        "\t\t${4:defaultBlock}",
-        "\t}",
-        "}"
-    ],
-    "description": "Angular new control flow syntax for ngSwitch"
-  },
-  "pre w/ json": {
-    "prefix": "a-prej",
-    "body": ["<pre>{{${1:model} | json}}</pre>$0"],
-    "description": "Angular pre debug | json"
-  },
-  "pre w/ async json": {
-    "prefix": "a-preja",
-    "body": ["<pre>{{${1:model} | async | json}}</pre>$0"],
-    "description": "Angular pre debug | async | json"
-  },
-  "ng-container": {
-    "prefix": "a-ng-container",
-    "body": ["<ng-container $0></ng-container>"],
-    "description": "Angular ng-container"
-  },
-  "ng-template": {
-    "prefix": "a-ng-template",
-    "body": ["<ng-template [ngTemplateOutlet]=\"${1:outlet}\" [ngOutletContext]=\"${2:context}\"></ng-template>"],
-    "description": "Angular ng-template"
-  },
-  "ng-content": {
-    "prefix": "a-ng-content",
-    "body": ["<ng-content select=\"${0:selector}\"></ng-content>"],
-    "description": "Angular ng-content"
-  }
+	"class": {
+		"prefix": "a-class",
+		"body": ["[class]=\"${1:expression}\""],
+		"description": "Angular [class] binding"
+	},
+	"style": {
+		"prefix": "a-style",
+		"body": ["[style.${1:property}]=\"${2:expression}\""],
+		"description": "Angular [style] binding"
+	},
+	"ngClass": {
+		"prefix": "a-ngClass",
+		"body": ["[ngClass]=\"{${1:cssClass}: ${2:expression}}\""],
+		"description": "Angular ngClass"
+	},
+	"ngFor": {
+		"prefix": "a-ngFor",
+		"body": ["*ngFor=\"let ${1:item} of ${2:list}\"${0}"],
+		"description": "Angular *ngFor"
+	},
+	"ngFor with trackBy": {
+		"prefix": "a-ngFor-trackBy",
+		"body": ["*ngFor=\"let ${1:item} of ${2:list}; trackBy:${1:item}.id\"${0}"],
+		"description": "Angular *ngFor with trackBy"
+	},
+	"ngForAsync": {
+		"prefix": "a-ngForAsync",
+		"body": [
+			"*ngFor=\"let ${1:item} of ${2:stream} | async as ${3:list}\"${0}"
+		],
+		"description": "Angular *ngForAsync"
+	},
+	"ngForNext": {
+		"prefix": "a-ngForNext",
+		"body": [
+			"@for (${1:item} of ${2:items}; track ${3:trackBy}) {",
+			"\t${0:forBlock}",
+			"}"
+		],
+		"description": "Angular new control flow syntax ngFor"
+	},
+	"ngForEmptyNext": {
+		"prefix": "a-ngForEmptyNext",
+		"body": [
+			"@for (${1:item} of ${2:items}; track ${3:trackBy}) {",
+			"\t${4:forBlock}",
+			"} @empty {",
+			"\t${0:emptyBlock}",
+			"}"
+		],
+		"description": "Angular new control flow syntax ngFor with empty block"
+	},
+	"ngForm": {
+		"prefix": "a-form",
+		"body": [
+			"<form (ngSubmit)=\"onSubmit()\" #${1:form}=\"ngForm\">",
+			"</form>"
+		],
+		"description": "Form with ngSubmit and form attributes"
+	},
+	"ngFormArrayName": {
+		"prefix": "a-formArrayName",
+		"body": ["formArrayName=\"${1:control}\""],
+		"description": "Angular formArrayName"
+	},
+	"ngFormControlName": {
+		"prefix": "a-formControlName",
+		"body": ["formControlName=\"${1:control}\""],
+		"description": "Angular formControlName"
+	},
+	"ngFormGroup": {
+		"prefix": "a-formGroup",
+		"body": ["[formGroup]=\"${1:form}\""],
+		"description": "Angular formGroup"
+	},
+	"ngFormGroupName": {
+		"prefix": "a-formGroupName",
+		"body": ["[formGroupName]=\"${1:name}\""],
+		"description": "Angular formGroupName"
+	},
+	"ngFormSubmit": {
+		"prefix": "a-form-submit",
+		"body": [
+			"<button type=\"submit\" [disabled]=\"!${1:form}.form.valid\">",
+			"\tSave",
+			"</button>"
+		],
+		"description": "Angular form submit"
+	},
+	"ngIf": {
+		"prefix": "a-ngIf",
+		"body": ["*ngIf=\"${1:expression}\""],
+		"description": "Angular *ngIf"
+	},
+	"ngIfElse": {
+		"prefix": "a-ngIfElse",
+		"body": ["*ngIf=\"${1:expression};else ${2:templateName}\""],
+		"description": "Angular *ngIfElse"
+	},
+	"ngIfNext": {
+		"prefix": "a-ngIfNext",
+		"body": ["@if (${1:expression}) {", "\t${0:ifBlock}", "}"],
+		"description": "Angular new control flow syntax for ngIf"
+	},
+	"ngIfElseNext": {
+		"prefix": "a-ngIfElseNext",
+		"body": [
+			"@if (${1:expression}) {",
+			"\t${2:ifBlock}",
+			"} @else {",
+			"\t${0:elseBlock}",
+			"}"
+		],
+		"description": "Angular new control flow syntax for ngIf"
+	},
+	"ngModel": {
+		"prefix": "a-ngModel",
+		"body": ["[(ngModel)]=\"${1:binding}\""],
+		"description": "Angular ngModel"
+	},
+	"ngRouterLink": {
+		"prefix": "a-routerLink",
+		"body": [
+			"[routerLink]=\"['/${1:routePath}']\" routerLinkActive=\"${2:router-link-active}\" $0"
+		],
+		"description": "Angular routerLink"
+	},
+	"ngRouterLinkWithParameter": {
+		"prefix": "a-routerLink-param",
+		"body": [
+			"[routerLink]=\"['${1:routePath}', ${2:routeParameterValue}]\"",
+			"routerLinkActive=\"${3:router-link-active}\"$0"
+		],
+		"description": "Angular routerLink with a route parameter"
+	},
+	"ngSelect": {
+		"prefix": "a-select",
+		"body": [
+			"<select [(ngModel)]=\"${1:model}\">",
+			"\t<option *ngFor=\"let ${2:item} of ${3:list}\" [value]=\"${2:item}\">{{${2:item}}}</option>",
+			"</select>"
+		],
+		"description": "<select> control with ngModel"
+	},
+	"ngStyle": {
+		"prefix": "a-ngStyle",
+		"body": ["[ngStyle]=\"{${1:style}: ${2:expression}}\""],
+		"description": "Angular ngStyle"
+	},
+	"ngSwitch": {
+		"prefix": "a-ngSwitch",
+		"body": [
+			"<div [ngSwitch]=\"${1:conditionExpression}\">",
+			"\t<div *ngSwitchCase=\"${2:expression}\">${3:output}</div>",
+			"\t<div *ngSwitchDefault>${4:output2}</div>",
+			"</div>"
+		],
+		"description": "Angular ngSwitch"
+	},
+	"ngSwitchNew": {
+		"prefix": "a-ngSwitchNext",
+		"body": [
+			"@switch (${1:expression}) {",
+			"\t@case (${2:case}) {",
+			"\t\t${3:caseBlock}",
+			"\t}${0}",
+			"\t@default {",
+			"\t\t${4:defaultBlock}",
+			"\t}",
+			"}"
+		],
+		"description": "Angular new control flow syntax for ngSwitch"
+	},
+	"pre w/ json": {
+		"prefix": "a-prej",
+		"body": ["<pre>{{${1:model} | json}}</pre>$0"],
+		"description": "Angular pre debug | json"
+	},
+	"pre w/ async json": {
+		"prefix": "a-preja",
+		"body": ["<pre>{{${1:model} | async | json}}</pre>$0"],
+		"description": "Angular pre debug | async | json"
+	},
+	"ng-container": {
+		"prefix": "a-ng-container",
+		"body": ["<ng-container $0></ng-container>"],
+		"description": "Angular ng-container"
+	},
+	"ng-template": {
+		"prefix": "a-ng-template",
+		"body": [
+			"<ng-template [ngTemplateOutlet]=\"${1:outlet}\" [ngOutletContext]=\"${2:context}\"></ng-template>"
+		],
+		"description": "Angular ng-template"
+	},
+	"ng-content": {
+		"prefix": "a-ng-content",
+		"body": ["<ng-content select=\"${0:selector}\"></ng-content>"],
+		"description": "Angular ng-content"
+	}
 }