angular-eslint · rafaelss95 · Sep 20, 2021 · Sep 20, 2021 · Sep 22, 2021 · Sep 22, 2021
diff --git a/packages/eslint-plugin-template/docs/rules/no-restricted-syntax.md b/packages/eslint-plugin-template/docs/rules/no-restricted-syntax.md
@@ -0,0 +1,280 @@
+<!--
+
+  DO NOT EDIT.
+
+  This markdown file was autogenerated using a mixture of the following files as the source of truth for its data:
+  - ../../src/rules/no-restricted-syntax.ts
+  - ../../tests/rules/no-restricted-syntax/cases.ts
+
+  In order to update this file, it is therefore those files which need to be updated, as well as potentially the generator script:
+  - ../../../../tools/scripts/generate-rule-docs.ts
+
+-->
+
+<br>
+
+# `@angular-eslint/template/no-restricted-syntax`
+
+Disallows specified syntax.
+
+- Type: suggestion
+- Category: Stylistic Issues
+
+<br>
+
+## Rule Options
+
+The rule does not have any configuration options.
+
+<br>
+
+## Usage Examples
+
+> The following examples are generated automatically from the actual unit tests within the plugin, so you can be assured that their behavior is accurate based on the current commit.
+
+<br>
+
+<details>
+<summary>❌ - Toggle examples of <strong>incorrect</strong> code for this rule</summary>
+
+<br>
+
+#### Custom Config
+
+```json
+{
+  "rules": {
+    "@angular-eslint/template/no-restricted-syntax": [
+      "error",
+      "Interpolation"
+    ]
+  }
+}
+```
+
+<br>
+
+#### ❌ Invalid Code
+
+```html
+<article>{{readSomethingPlease}}</article>
+         ~~~~~~~~~~~~~~~~~~~~~~~
+```
+
+<br>
+
+---
+
+<br>
+
+#### Custom Config
+
+```json
+{
+  "rules": {
+    "@angular-eslint/template/no-restricted-syntax": [
+      "error",
+      {
+        "selector": "Element[name='button']:not(:has(:matches(BoundAttribute, TextAttribute)[name='type']))",
+        "message": "Missing an explicit type attribute for button"
+      }
+    ]
+  }
+}
+```
+
+<br>
+
+#### ❌ Invalid Code
+
+```html
+<button>Click me!</button>
+~~~~~~~~~~~~~~~~~~~~~~~~~~
+```
+
+<br>
+
+---
+
+<br>
+
+#### Custom Config
+
+```json
+{
+  "rules": {
+    "@angular-eslint/template/no-restricted-syntax": [
+      "error",
+      {
+        "selector": "Element[name='button'] :matches(BoundAttribute, TextAttribute)[name='type'][value!=/^(button|reset|submit)$/]"
+      }
+    ]
+  }
+}
+```
+
+<br>
+
+#### ❌ Invalid Code
+
+```html
+<button type="invalidType">Click me!</button>
+        ~~~~~~~~~~~~~~~~~~
+```
+
+<br>
+
+---
+
+<br>
+
+#### Custom Config
+
+```json
+{
+  "rules": {
+    "@angular-eslint/template/no-restricted-syntax": [
+      "error",
+      "BoundAttribute[name=\"ngClass\"]"
+    ]
+  }
+}
+```
+
+<br>
+
+#### ❌ Invalid Code
+
+```html
+<button [ngClass]="classes?.class1">Click me!</button>
+        ~~~~~~~~~~~~~~~~~~~~~~~~~~~
+```
+
+</details>
+
+<br>
+
+---
+
+<br>
+
+<details>
+<summary>✅ - Toggle examples of <strong>correct</strong> code for this rule</summary>
+
+<br>
+
+#### Custom Config
+
+```json
+{
+  "rules": {
+    "@angular-eslint/template/no-restricted-syntax": [
+      "error",
+      "Binary[operation=/^(==|!=)$/]"
+    ]
+  }
+}
+```
+
+<br>
+
+#### ✅ Valid Code
+
+```html
+{{ amIUsingStrictEquality === true ? 'Yes' : 'No' }}
+```
+
+<br>
+
+---
+
+<br>
+
+#### Custom Config
+
+```json
+{
+  "rules": {
+    "@angular-eslint/template/no-restricted-syntax": [
+      "error",
+      "Template[children.length=0]"
+    ]
+  }
+}
+```
+
+<br>
+
+#### ✅ Valid Code
+
+```html
+<input [formControl]="formControl">
+<textarea [ngModel]="formControl"></textarea>
+<ng-template>Child here!</ng-template>
+```
+
+<br>
+
+---
+
+<br>
+
+#### Custom Config
+
+```json
+{
+  "rules": {
+    "@angular-eslint/template/no-restricted-syntax": [
+      "error",
+      {
+        "selector": ":matches(BoundAttribute, TextAttribute)[name='ngClass']"
+      }
+    ]
+  }
+}
+```
+
+<br>
+
+#### ✅ Valid Code
+
+```html
+<div [class]="classes"></div>
+```
+
+<br>
+
+---
+
+<br>
+
+#### Custom Config
+
+```json
+{
+  "rules": {
+    "@angular-eslint/template/no-restricted-syntax": [
+      "error",
+      {
+        "message": "Do not use `| json`.",
+        "selector": "BindingPipe[name='json']"
+      }
+    ]
+  }
+}
+```
+
+<br>
+
+#### ✅ Valid Code
+
+```html
+<ng-container *translator="let translator">
+  {{ translator | async }}
+</ng-container>
+{{ one ?? other }}
+```
+
+</details>
+
+<br>
diff --git a/packages/eslint-plugin-template/src/configs/all.json b/packages/eslint-plugin-template/src/configs/all.json
@@ -21,6 +21,7 @@
     "@angular-eslint/template/no-duplicate-attributes": "error",
     "@angular-eslint/template/no-negated-async": "error",
     "@angular-eslint/template/no-positive-tabindex": "error",
+    "@angular-eslint/template/no-restricted-syntax": "error",
     "@angular-eslint/template/use-track-by-function": "error"
   }
 }
diff --git a/packages/eslint-plugin-template/src/index.ts b/packages/eslint-plugin-template/src/index.ts
@@ -57,6 +57,9 @@ import noNegatedAsync, {
 import noPositiveTabindex, {
   RULE_NAME as noPositiveTabindexRuleName,
 } from './rules/no-positive-tabindex';
+import noRestrictedSyntax, {
+  RULE_NAME as noRestrictedSyntaxRuleName,
+} from './rules/no-restricted-syntax';
 import useTrackByFunction, {
   RULE_NAME as useTrackByFunctionRuleName,
 } from './rules/use-track-by-function';
@@ -91,6 +94,7 @@ export default {
     [noDuplicateAttributesRuleName]: noDuplicateAttributes,
     [noNegatedAsyncRuleName]: noNegatedAsync,
     [noPositiveTabindexRuleName]: noPositiveTabindex,
+    [noRestrictedSyntaxRuleName]: noRestrictedSyntax,
     [useTrackByFunctionRuleName]: useTrackByFunction,
   },
 };