From 27861961bbb36e9bc25fcd45cff21b5645f02f9b Mon Sep 17 00:00:00 2001
From: Minko Gechev <mgechev@gmail.com>
Date: Fri, 19 Jul 2024 02:36:35 -0700
Subject: [PATCH] docs: update the syntax highlighting for angular (#7762)

---
 docs/framework/angular/devtools.md                          | 2 +-
 .../angular/guides/background-fetching-indicators.md        | 4 ++--
 docs/framework/angular/guides/disabling-queries.md          | 6 +++---
 docs/framework/angular/guides/infinite-queries.md           | 6 +++---
 docs/framework/angular/guides/mutations.md                  | 4 ++--
 docs/framework/angular/guides/optimistic-updates.md         | 4 ++--
 docs/framework/angular/guides/paginated-queries.md          | 2 +-
 docs/framework/angular/guides/queries.md                    | 4 ++--
 docs/framework/angular/guides/query-cancellation.md         | 2 +-
 docs/framework/angular/overview.md                          | 2 +-
 docs/framework/angular/quick-start.md                       | 2 +-
 11 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/docs/framework/angular/devtools.md b/docs/framework/angular/devtools.md
index b2d8e3c836..394522855d 100644
--- a/docs/framework/angular/devtools.md
+++ b/docs/framework/angular/devtools.md
@@ -29,7 +29,7 @@ Floating Mode will mount the devtools as a fixed, floating element in your app a
 
 Place the following code as high in your Angular app as you can. The closer it is to the root of the page, the better it will work!
 
-```ts
+```angular-ts
 import { AngularQueryDevtools } from '@tanstack/angular-query-devtools-experimental'
 import { Component } from '@angular/core';
 
diff --git a/docs/framework/angular/guides/background-fetching-indicators.md b/docs/framework/angular/guides/background-fetching-indicators.md
index cae36e009d..5ad6ee3ef4 100644
--- a/docs/framework/angular/guides/background-fetching-indicators.md
+++ b/docs/framework/angular/guides/background-fetching-indicators.md
@@ -6,7 +6,7 @@ ref: docs/framework/react/guides/background-fetching-indicators.md
 
 [//]: # 'Example'
 
-```ts
+```angular-ts
 @Component({
   selector: 'posts',
   template: `
@@ -39,7 +39,7 @@ export class TodosComponent {
 [//]: # 'Example'
 [//]: # 'Example2'
 
-```ts
+```angular-ts
 import { injectIsFetching } from '@tanstack/angular-query-experimental'
 
 @Component({
diff --git a/docs/framework/angular/guides/disabling-queries.md b/docs/framework/angular/guides/disabling-queries.md
index 39b5408586..a57ac39728 100644
--- a/docs/framework/angular/guides/disabling-queries.md
+++ b/docs/framework/angular/guides/disabling-queries.md
@@ -7,7 +7,7 @@ replace: { 'useQuery': 'injectQuery' }
 
 [//]: # 'Example'
 
-```ts
+```angular-ts
 @Component({
   selector: 'todos',
   template: `<div>
@@ -44,7 +44,7 @@ export class TodosComponent {
 [//]: # 'Example'
 [//]: # 'Example2'
 
-```ts
+```angular-ts
 @Component({
   selector: 'todos',
   template: `
@@ -69,7 +69,7 @@ export class TodosComponent {
 [//]: # 'Example2'
 [//]: # 'Example3'
 
-```ts
+```angular-ts
 @Component({
   selector: 'todos',
   template: `
diff --git a/docs/framework/angular/guides/infinite-queries.md b/docs/framework/angular/guides/infinite-queries.md
index d299142600..9fdde83e26 100644
--- a/docs/framework/angular/guides/infinite-queries.md
+++ b/docs/framework/angular/guides/infinite-queries.md
@@ -8,7 +8,7 @@ replace:
 
 [//]: # 'Example'
 
-```ts
+```angular-ts
 import { Component, computed, inject } from '@angular/core'
 import { injectInfiniteQuery } from '@tanstack/angular-query-experimental'
 import { lastValueFrom } from 'rxjs'
@@ -48,7 +48,7 @@ export class Example {
 }
 ```
 
-```html
+```angular-html
 <div>
   @if (query.isPending()) {
   <p>Loading...</p>
@@ -70,7 +70,7 @@ export class Example {
 [//]: # 'Example'
 [//]: # 'Example1'
 
-```ts
+```angular-ts
 @Component({
   template: ` <list-component (endReached)="fetchNextPage()" /> `,
 })
diff --git a/docs/framework/angular/guides/mutations.md b/docs/framework/angular/guides/mutations.md
index b8adc4d039..5ba756d625 100644
--- a/docs/framework/angular/guides/mutations.md
+++ b/docs/framework/angular/guides/mutations.md
@@ -14,7 +14,7 @@ replace:
 
 [//]: # 'Example'
 
-```ts
+```angular-ts
 @Component({
   template: `
     <div>
@@ -45,7 +45,7 @@ export class TodosComponent {
 [//]: # 'Example2'
 [//]: # 'Example3'
 
-```ts
+```angular-ts
 @Component({
   standalone: true,
   selector: 'todo-item',
diff --git a/docs/framework/angular/guides/optimistic-updates.md b/docs/framework/angular/guides/optimistic-updates.md
index 4786759124..08c6931516 100644
--- a/docs/framework/angular/guides/optimistic-updates.md
+++ b/docs/framework/angular/guides/optimistic-updates.md
@@ -28,7 +28,7 @@ addTodo = injectMutation(() => ({
 [//]: # 'ExampleUI1'
 [//]: # 'ExampleUI2'
 
-```ts
+```angular-ts
 @Component({
   template: `
     @for (todo of todos.data(); track todo.id) {
@@ -45,7 +45,7 @@ class TodosComponent {}
 [//]: # 'ExampleUI2'
 [//]: # 'ExampleUI3'
 
-```ts
+```angular-ts
 @Component({
   template: `
     @if (addTodo.isError()) {
diff --git a/docs/framework/angular/guides/paginated-queries.md b/docs/framework/angular/guides/paginated-queries.md
index 5dbb4ffcae..3fe42c6a9a 100644
--- a/docs/framework/angular/guides/paginated-queries.md
+++ b/docs/framework/angular/guides/paginated-queries.md
@@ -22,7 +22,7 @@ const result = injectQuery(() => ({
 [//]: # 'Example'
 [//]: # 'Example2'
 
-```ts
+```angular-ts
 @Component({
   selector: 'pagination-example',
   template: `
diff --git a/docs/framework/angular/guides/queries.md b/docs/framework/angular/guides/queries.md
index 88898c13bf..3aa9b75853 100644
--- a/docs/framework/angular/guides/queries.md
+++ b/docs/framework/angular/guides/queries.md
@@ -33,7 +33,7 @@ result = injectQuery(() => ({ queryKey: ['todos'], queryFn: fetchTodoList }))
 [//]: # 'Example2'
 [//]: # 'Example3'
 
-```ts
+```angular-ts
 @Component({
   selector: 'todos',
   standalone: true,
@@ -66,7 +66,7 @@ If booleans aren't your thing, you can always use the `status` state as well:
 
 [//]: # 'Example4'
 
-```ts
+```angular-ts
 @Component({
   selector: 'todos',
   standalone: true,
diff --git a/docs/framework/angular/guides/query-cancellation.md b/docs/framework/angular/guides/query-cancellation.md
index b2884d7255..7699625aad 100644
--- a/docs/framework/angular/guides/query-cancellation.md
+++ b/docs/framework/angular/guides/query-cancellation.md
@@ -81,7 +81,7 @@ You might want to cancel a query manually. For example, if the request takes a l
 
 [//]: # 'Example7'
 
-```ts
+```angular-ts
 @Component({
   standalone: true,
   template: `<button (click)="onCancel()">Cancel</button>`,
diff --git a/docs/framework/angular/overview.md b/docs/framework/angular/overview.md
index 1eb2882124..06aa5e89f9 100644
--- a/docs/framework/angular/overview.md
+++ b/docs/framework/angular/overview.md
@@ -60,7 +60,7 @@ In the example below, you can see Angular Query in its most basic and simple for
 
 [Open in CodeSandbox](https://codesandbox.io/s/github/tanstack/query/tree/main/examples/angular/simple)
 
-```ts
+```angular-ts
 import { AngularQueryDevtools } from '@tanstack/angular-query-devtools-experimental'
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
 import { HttpClient } from '@angular/common/http'
diff --git a/docs/framework/angular/quick-start.md b/docs/framework/angular/quick-start.md
index ff3c29ae6b..f82b85322e 100644
--- a/docs/framework/angular/quick-start.md
+++ b/docs/framework/angular/quick-start.md
@@ -43,7 +43,7 @@ export class AppModule {}
 
 ### Component with query and mutation
 
-```ts
+```angular-ts
 import { Component, Injectable, inject } from '@angular/core'
 import { HttpClient } from '@angular/common/http'
 import { lastValueFrom } from 'rxjs'