V18 (#148)

* Update Angular snippets to use functional guard syntax

* chore: update Angular snippets to version 18

* chore: update ngFor trackBy syntax to use a trackBy function

Author: johnpapa

CHANGELOG.md

@@ -1,5 +1,16 @@
 ## Angular Snippets Changelog
 
+<a name="18.0.0"></a>
+
+# 18.0.0 (2024-07-15)
+
+- removed ngTemplate due to syntax changes
+- updated ngContent with squared brackets syntax
+- udpated `a-ngFor-trackBy` to call a trackBy function you create (using `a-trackBy`)
+- Newer functional guard syntax updates:
+  - Updated CanActivate guard to be a functional CanActivateFn guard
+  - Updated CanActivateFn guard to be a functional CanActivateChildFn guard
+
 <a name="16.0.1"></a>
 
 # 16.0.1 (2023-06-15)

README.md

@@ -34,8 +34,8 @@ Alternatively, press `Ctrl`+`Space` (Windows, Linux) or `Cmd`+`Space` (macOS) to
 | `a-component-root`           | root app component                                                   |
 | `a-ctor-skip-self`           | angular `NgModule`'s `skipself` constructor                          |
 | `a-directive`                | directive                                                            |
-| `a-guard-can-activate`       | `CanActivate` guard                                                  |
-| `a-guard-can-activate-child` | `CanActivateChild` guard                                             |
+| `a-guard-can-activate`       | `CanActivateFn` guard                                                |
+| `a-guard-can-activate-child` | `CanActivateChildFn` guard                                             |
 | `a-guard-can-deactivate`     | `CanDeactivate` guard                                                |
 | `a-guard-can-match`          | `CanMatch` guard                                                     |
 | `a-httpclient-get`           | `httpClient.get` with Rx Observable                                  |
@@ -119,7 +119,6 @@ Alternatively, press `Ctrl`+`Space` (Windows, Linux) or `Cmd`+`Space` (macOS) to
 | `a-prej`             | show the JSON form of a model                       |
 | `a-preja`            | show the JSON form of a model, using async          |
 | `a-ng-container`     | `<ng-container>` element                            |
-| `a-ng-template`      | `<ng-template>` element                             |
 | `a-ng-content`       | `<ng-content>` element                              |
 
 ### VS Code Snippets

package.json

@@ -1,9 +1,9 @@
 {
   "name": "Angular2",
   "publisher": "johnpapa",
-  "displayName": "Angular Snippets (Version 16)",
-  "description": "Angular version 16 snippets by John Papa",
-  "version": "16.0.1",
+  "displayName": "Angular Snippets (Version 18)",
+  "description": "Angular version 18 snippets by John Papa",
+  "version": "18.0.0",
   "icon": "images/angular-shield.png",
   "galleryBanner": {
     "color": "#0273D4",

snippets/html.json

@@ -21,7 +21,7 @@
   },
   "ngFor with trackBy": {
     "prefix": "a-ngFor-trackBy",
-    "body": ["*ngFor=\"let ${1:item} of ${2:list}; trackBy:${1:item}.id\"${0}"],
+    "body": ["*ngFor=\"let ${1:item} of ${2:list}; trackBy:${1:trackByFnName}\"${0}"],
     "description": "Angular *ngFor with trackBy"
   },
   "ngForAsync": {
@@ -126,14 +126,9 @@
     "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>"],
+    "body": ["<ng-content select=\"[${0:selector}]\"></ng-content>"],
     "description": "Angular ng-content"
   }
 }

snippets/typescript.json

@@ -298,41 +298,50 @@
       "}"
     ]
   },
-  "Angular CanActivate Guard": {
+  "Angular Functional CanActivateFn Guard": {
     "prefix": "a-guard-can-activate",
-    "description": "Angular CanActivate guard",
+    "description": "Angular Functional CanActivate guard",
     "body": [
       "import { inject } from '@angular/core';",
-      "import { ActivatedRouteSnapshot, CanActivateFn, RouterStateSnapshot } from '@angular/router';",
+      "import {",
+      "  ActivatedRouteSnapshot,",
+      "  CanActivateFn,",
+      "  Router,",
+      "  RouterStateSnapshot,",
+      "} from '@angular/router';",
       "",
-      "export const ${2:Name}Guard: CanActivateFn = (",
+      "export const ${1:Name}Guard: CanActivateFn = (",
       "\troute: ActivatedRouteSnapshot,",
       "\tstate: RouterStateSnapshot",
-      "\t) => {",
+      ") => {",
+      "\tconst router = inject(Router);",
       "",
-      "\t\treturn true;$0",
-      "}"
+      "\treturn true;$0",
+      "};"
     ]
   },
-  "Angular CanActivateChild Guard": {
+  "Angular Functional CanActivateChildFn Guard": {
     "prefix": "a-guard-can-activate-child",
     "description": "Angular CanActivateChild guard",
     "body": [
       "import { inject } from '@angular/core';",
-      "import { ActivatedRouteSnapshot, CanActivateChildFn, RouterStateSnapshot } from '@angular/router';",
-      "",
-      "export const ${2:Name}Guard: CanActivateChildFn = (",
-      "\troute: ActivatedRouteSnapshot,",
-      "\tstate: RouterStateSnapshot",
-      "\t) => {",
-      "",
-      "\t\treturn true;$0",
-      "}"
+      "import {",
+      "  ActivatedRouteSnapshot,",
+      "  CanActivateChildFn,",
+      "  RouterStateSnapshot,",
+      "} from '@angular/router';",
+      "",
+      "const ${1:Name}Guard: CanActivateChildFn = (",
+      "  route: ActivatedRouteSnapshot,",
+      "  state: RouterStateSnapshot",
+      ") => {",
+      "\treturn true;$0",
+      "};"
     ]
   },
-  "Angular CanMatch Guard": {
+  "Angular Functional CanMatchFn Guard": {
     "prefix": "a-guard-can-match",
-    "description": "Angular CanMatch guard",
+    "description": "Angular Functional CanMatchFn guard",
     "body": [
       "import { inject } from '@angular/core';",
       "import { CanMatchFn, Route, Router, UrlSegment } from '@angular/router';",
@@ -347,7 +356,7 @@
   },
   "Angular CanDeactivate Guard": {
     "prefix": "a-guard-can-deactivate",
-    "description": "Angular CanDeactivate guard",
+    "description": "Angular Functional CanDeactivateFn guard",
     "body": [
       "import { inject } from '@angular/core';",
       "import { CanDeactivateFn } from '@angular/router';",