feat: angular attribute syntax

Author: Netail

crates/biome_html_parser/src/parser.rs

@@ -186,6 +186,9 @@ impl From<&HtmlFileSource> for HtmlParseOptions {
             HtmlVariant::Svelte => {
                 options = options.with_single_text_expression().with_svelte();
             }
+            HtmlVariant::Angular => {
+                options = options.with_single_text_expression();
+            }
         }
 
         options

crates/biome_html_syntax/src/file_source.rs

@@ -31,6 +31,8 @@ pub enum HtmlVariant {
     Vue,
     /// Use this variant to parse a Svelte file
     Svelte,
+    /// Use this variant to parse an Angular file
+    Angular,
 }
 
 impl Default for HtmlVariant {
@@ -103,6 +105,12 @@ impl HtmlFileSource {
         }
     }
 
+    pub fn angular() -> Self {
+        Self {
+            variant: HtmlVariant::Angular,
+        }
+    }
+
     /// Try to return the HTML file source corresponding to this file name from well-known files
     pub fn try_from_well_known(path: &Utf8Path) -> Result<Self, FileSourceError> {
         let Some(extension) = path.extension() else {
@@ -120,6 +128,7 @@ impl HtmlFileSource {
             "astro" => Ok(Self::astro()),
             "vue" => Ok(Self::vue()),
             "svelte" => Ok(Self::svelte()),
+            "component.html" => Ok(Self::angular()),
             _ => Err(FileSourceError::UnknownExtension),
         }
     }
@@ -139,6 +148,7 @@ impl HtmlFileSource {
             "astro" => Ok(Self::astro()),
             "vuejs" | "vue" => Ok(Self::vue()),
             "svelte" => Ok(Self::svelte()),
+            "angular" => Ok(Self::angular()),
             _ => Err(FileSourceError::UnknownLanguageId),
         }
     }

xtask/codegen/html.ungram

@@ -186,6 +186,7 @@ AnyHtmlAttribute =
 	| HtmlAttributeSingleTextExpression
 	| SvelteAttachAttribute
 	| HtmlSpreadAttribute
+	| AnyAngularAttribute
 	| AnySvelteDirective
 	| AnyVueDirective
 	| AnyAstroDirective
@@ -757,3 +758,57 @@ AstroDirectiveValue =
 	colon_token: ':'
 	name: HtmlAttributeName
 	initializer: HtmlAttributeInitializerClause?
+
+// ==================================
+// Angular
+// ==================================
+
+// reference: https://angular.dev/guide/templates
+
+AnyAngularAttribute =
+	AngularEventBinding
+	| AngularPropertyBinding
+	| AngularTwoWayBinding
+	| AngularStructuralDirective
+	| AngularTemplateRefVariable
+
+// <button (click)="onClick()">
+//         ^^^^^^^^^^^^^^^^^^
+AngularEventBinding =
+	'('
+	name: AngularBindingName
+	')'
+	initializer: HtmlAttributeInitializerClause?
+
+// <input [value]="val">
+//        ^^^^^^^^^^^^^^
+AngularPropertyBinding =
+	'['
+	name: AngularBindingName
+	']'
+	initializer: HtmlAttributeInitializerClause?
+
+// <input [(ngModel)]="value">
+//        ^^^^^^^^^^^^^^^^^^^
+AngularTwoWayBinding =
+	'['
+	'('
+	name: AngularBindingName
+	')'
+	']'
+	initializer: HtmlAttributeInitializerClause?
+
+// <div *ngIf="cond">
+//      ^^^^^^^^^^^^^
+AngularStructuralDirective =
+	'*'
+	name: AngularBindingName
+	initializer: HtmlAttributeInitializerClause?
+
+// <ng-template #tmpl>
+//               ^^^^^
+AngularTemplateRefVariable =
+	'#'
+	name: AngularBindingName
+
+AngularBindingName = value: 'html_literal'