fix(eslint-plugin-template): [attribute-order] check for ng-template within svg (#2223)

Author: reduckted

packages/eslint-plugin-template/docs/rules/attributes-order.md

@@ -578,6 +578,35 @@ interface Options {
 
 #### ❌ Invalid Code
 
+```html
+<svg>
+  <ng-template let-value #Template></ng-template>
+               ~~~~~~~~~~~~~~~~~~~
+</svg>
+```
+
+<br>
+
+---
+
+<br>
+
+#### Default Config
+
+```json
+{
+  "rules": {
+    "@angular-eslint/template/attributes-order": [
+      "error"
+    ]
+  }
+}
+```
+
+<br>
+
+#### ❌ Invalid Code
+
 ```html
 <td mat-cell *matCellDef="let element"></td>
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
@@ -1019,6 +1048,32 @@ interface Options {
 <div i18n test1="test1" i18n-test1="@@TEST1" test2="test2" i18n-test2="@@TEST2"></div>
 ```
 
+<br>
+
+---
+
+<br>
+
+#### Default Config
+
+```json
+{
+  "rules": {
+    "@angular-eslint/template/attributes-order": [
+      "error"
+    ]
+  }
+}
+```
+
+<br>
+
+#### ✅ Valid Code
+
+```html
+<svg><ng-template #Template let-value><line x1="1" x2="2" y1="3" y2="4"></line></ng-template></svg>
+```
+
 </details>
 
 <br>

packages/eslint-plugin-template/src/rules/attributes-order.ts

@@ -300,7 +300,10 @@ function toTemplateReferenceVariableOrderType(reference: TmplAstReference) {
 function isImplicitTemplate(
   node: TmplAstNode,
 ): node is TmplAstTemplate & { tagName: null } {
-  return isTmplAstTemplate(node) && node.tagName !== 'ng-template';
+  return (
+    isTmplAstTemplate(node) &&
+    (node.tagName === null || !/^(:svg:)?ng-template$/.test(node.tagName))
+  );
 }
 
 function extractTemplateAttrs(

packages/eslint-plugin-template/tests/rules/attributes-order/cases.ts

@@ -23,6 +23,7 @@ export const valid: readonly (string | ValidTestCase<Options>)[] = [
   '<ng-template [ngIf]="condition" [ngIfThen]="If" [ngIfElse]="Else"><div></div></ng-template>',
   '<ng-template #Template let-value><div></div></ng-template>',
   '<div i18n test1="test1" i18n-test1="@@TEST1" test2="test2" i18n-test2="@@TEST2"></div>',
+  '<svg><ng-template #Template let-value><line x1="1" x2="2" y1="3" y2="4"></line></ng-template></svg>',
 ];
 
 export const invalid: readonly InvalidTestCase<MessageIds, Options>[] = [
@@ -345,6 +346,27 @@ export const invalid: readonly InvalidTestCase<MessageIds, Options>[] = [
                    
     `,
   }),
+  convertAnnotatedSourceToFailureCase({
+    messageId,
+    description: 'should work with ng-template in svg',
+    annotatedSource: `
+      <svg>
+        <ng-template let-value #Template></ng-template>
+                     ~~~~~~~~~~~~~~~~~~~
+      </svg>
+    `,
+    options: [{ alphabetical: true }] as Options,
+    data: {
+      expected: '`#Template`, `let-value`',
+      actual: '`let-value`, `#Template`',
+    },
+    annotatedOutput: `
+      <svg>
+        <ng-template #Template let-value></ng-template>
+                     
+      </svg>
+    `,
+  }),
   convertAnnotatedSourceToFailureCase({
     messageId,
     description: 'should work with structural directive and single let',