From 4fb15b4c034f11c9385c70c9beb74c336a43b645 Mon Sep 17 00:00:00 2001
From: Minko Gechev <mgechev@gmail.com>
Date: Fri, 19 Jul 2024 00:45:40 -0700
Subject: [PATCH] docs: update the syntax highlighting for angular (#869)

---
 docs/framework/angular/guides/arrays.md       | 10 +++----
 .../angular/guides/basic-concepts.md          |  8 +++---
 docs/framework/angular/guides/validation.md   | 26 +++++++++----------
 docs/framework/angular/quick-start.md         |  2 +-
 4 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/docs/framework/angular/guides/arrays.md b/docs/framework/angular/guides/arrays.md
index f37b64d6f..70c867fbb 100644
--- a/docs/framework/angular/guides/arrays.md
+++ b/docs/framework/angular/guides/arrays.md
@@ -9,7 +9,7 @@ TanStack Form supports arrays as values in a form, including sub-object values i
 
 To use an array, you can use `field.api.state.value` on an array value:
 
-```typescript
+```angular-ts
 @Component({
   selector: 'app-root',
   standalone: true,
@@ -38,7 +38,7 @@ export class AppComponent {
 
 This will generate the mapped JSX every time you run `pushValue` on `field`:
 
-```html
+```angular-html
 <button (click)="people.api.pushValue(defaultPerson)" type="button">
   Add person
 </button>
@@ -46,7 +46,7 @@ This will generate the mapped JSX every time you run `pushValue` on `field`:
 
 Finally, you can use a subfield like so:
 
-```html
+```angular-html
  <ng-container
   [tanstackField]="form"
   [name]="getPeopleName($index)"
@@ -79,7 +79,7 @@ export class AppComponent {
 > While it's unfortunate that you need to use a function to get the field name, it's a requirement for how our strict TypeScript types work.
 >
 > See, if we did the following:
-> ```html
+> ```angular-html
 > <ng-container [tanstackField]="form" [name]="'people[' + $index + '].name'"></ng-container>
 > ```
 >
@@ -91,7 +91,7 @@ export class AppComponent {
 
 ## Full Example
 
-```typescript
+```angular-ts
 @Component({
   selector: 'app-root',
   standalone: true,
diff --git a/docs/framework/angular/guides/basic-concepts.md b/docs/framework/angular/guides/basic-concepts.md
index d7d3a146b..0a5073a75 100644
--- a/docs/framework/angular/guides/basic-concepts.md
+++ b/docs/framework/angular/guides/basic-concepts.md
@@ -58,7 +58,7 @@ The Field API is an object accessed in the `tanstackField.api` property when cre
 
 Example:
 
-```html
+```angular-html
 <input
   [value]="fieldName.api.state.value"
   (blur)="fieldName.api.handleBlur()"
@@ -72,7 +72,7 @@ Example:
 
 Example:
 
-```typescript
+```angular-ts
 @Component({
   selector: 'app-root',
   standalone: true,
@@ -120,7 +120,7 @@ In addition to hand-rolled validation options, we also provide adapters like `@t
 
 Example:
 
-```typescript
+```angular-ts
 import { zodValidator } from '@tanstack/zod-form-adapter'
 import { z } from 'zod'
 
@@ -195,7 +195,7 @@ When working with array fields, you can use the fields `pushValue`, `removeValue
 
 Example:
 
-```typescript
+```angular-ts
 @Component({
   selector: 'app-root',
   standalone: true,
diff --git a/docs/framework/angular/guides/validation.md b/docs/framework/angular/guides/validation.md
index e356d07be..b50560561 100644
--- a/docs/framework/angular/guides/validation.md
+++ b/docs/framework/angular/guides/validation.md
@@ -15,7 +15,7 @@ It's up to you! The `[tanstackField]` directive accepts some callbacks as props
 
 Here is an example:
 
-```typescript
+```angular-ts
 @Component({
   selector: 'app-root',
   standalone: true,
@@ -53,7 +53,7 @@ export class AppComponent {
 
 In the example above, the validation is done at each keystroke (`onChange`). If, instead, we wanted the validation to be done when the field is blurred, we would change the code above like so:
 
-```typescript
+```angular-ts
 @Component({
   selector: 'app-root',
   standalone: true,
@@ -94,7 +94,7 @@ export class AppComponent {
 
 So you can control when the validation is done by implementing the desired callback. You can even perform different pieces of validation at different times:
 
-```typescript
+```angular-ts
 @Component({
   selector: 'app-root',
   standalone: true,
@@ -144,7 +144,7 @@ In the example above, we are validating different things on the same field at di
 
 Once you have your validation in place, you can map the errors from an array to be displayed in your UI:
 
-```typescript
+```angular-ts
 @Component({
   selector: 'app-root',
   standalone: true,
@@ -175,7 +175,7 @@ export class AppComponent {
 
 Or use the `errorMap` property to access the specific error you're looking for:
 
-```typescript
+```angular-ts
 @Component({
   selector: 'app-root',
   standalone: true,
@@ -210,7 +210,7 @@ As shown above, each `[tanstackField]` accepts its own validation rules via the
 
 Example:
 
-```typescript
+```angular-ts
 @Component({
   selector: 'app-root',
   standalone: true,
@@ -261,7 +261,7 @@ While we suspect most validations will be synchronous, there are many instances
 
 To do this, we have dedicated `onChangeAsync`, `onBlurAsync`, and other methods that can be used to validate against:
 
-```typescript
+```angular-ts
 @Component({
   selector: 'app-root',
   standalone: true,
@@ -301,7 +301,7 @@ export class AppComponent {
 
 Synchronous and Asynchronous validations can coexist. For example, it is possible to define both `onBlur` and `onBlurAsync` on the same field:
 
-```typescript
+```angular-ts
 @Component({
   selector: 'app-root',
   standalone: true,
@@ -351,7 +351,7 @@ While async calls are the way to go when validating against the database, runnin
 
 Instead, we enable an easy method for debouncing your `async` calls by adding a single property:
 
-```html
+```angular-html
 <ng-container
   [tanstackField]="form"
   name="age"
@@ -365,7 +365,7 @@ Instead, we enable an easy method for debouncing your `async` calls by adding a
 
 This will debounce every async call with a 500ms delay. You can even override this property on a per-validation property:
 
-```html
+```angular-html
 <ng-container
   [tanstackField]="form"
   name="age"
@@ -398,7 +398,7 @@ $ npm install @tanstack/valibot-form-adapter valibot
 
 Once done, we can add the adapter to the `validator` property on the form or field:
 
-```typescript
+```angular-ts
 import { zodValidator } from '@tanstack/zod-form-adapter'
 import { z } from 'zod'
 
@@ -434,7 +434,7 @@ export class AppComponent {
 
 These adapters also support async operations using the proper property names:
 
-```typescript
+```angular-ts
 @Component({
   selector: 'app-root',
   standalone: true,
@@ -477,7 +477,7 @@ The form state object has a `canSubmit` flag that is false when any field is inv
 
 You can subscribe to it via `injectStore` and use the value in order to, for example, disable the submit button when the form is invalid (in practice, disabled buttons are not accessible, use `aria-disabled` instead).
 
-```typescript
+```angular-ts
 @Component({
   selector: 'app-root',
   standalone: true,
diff --git a/docs/framework/angular/quick-start.md b/docs/framework/angular/quick-start.md
index c93ae742d..a9f8b46eb 100644
--- a/docs/framework/angular/quick-start.md
+++ b/docs/framework/angular/quick-start.md
@@ -5,7 +5,7 @@ title: Quick Start
 
 The bare minimum to get started with TanStack Form is to create a form and add a field. Keep in mind that this example does not include any validation or error handling... yet.
 
-```typescript
+```angular-ts
 import { Component } from '@angular/core'
 import { bootstrapApplication } from '@angular/platform-browser'
 import { TanStackField, injectForm } from '@tanstack/angular-form'