diff --git a/snippets/frameworks/angular/html.json b/snippets/frameworks/angular/html.json
index 7c70d30f..466c9e29 100644
--- a/snippets/frameworks/angular/html.json
+++ b/snippets/frameworks/angular/html.json
@@ -1,139 +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"
-  },
-  "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"
-  },
-  "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"
-  },
-  "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"
+	}
 }
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"
   }
 }