chore: add angular 21 documentation

Author: AtofStryker

docs/app/component-testing/angular/api.mdx

@@ -13,6 +13,11 @@ sidebar_label: API
 
 ### mount
 
+```js
+// for Angular 20 and 21 using zoneless configuration
+import { mount } from 'cypress/angular-zoneless'
+```
+
 ```js
 import { mount } from 'cypress/angular'
 ```
@@ -142,18 +147,22 @@ providers, declarations, imports and even component @Inputs()
     <td>Description</td>
   </thead>
   <tr>
-    <td>autoSpyOutputs</td>
+    <td>autoSpyOutputs (deprecated)</td>
     <td>boolean (optional)</td>
     <td>
       flag to automatically create a cy.spy() for every component @Output()
-      property
+      property. This is deprecated and not supported in
+      `cypress/angular-zoneless` and will be removed in a future version
     </td>
   </tr>
   <tr>
-    <td>autoDetectChanges</td>
+    <td>autoDetectChanges (deprecated)</td>
     <td>boolean (optional)</td>
     <td>
-      flag defaulted to true to automatically detect changes in your components
+      flag defaulted to true to automatically detect changes in your components.
+      This is deprecated and not supported in `cypress/angular-zoneless` and
+      will be removed in a future version as it is not needed with zoneless
+      configuration
     </td>
   </tr>
   <tr>

docs/app/component-testing/angular/examples.mdx

@@ -46,7 +46,6 @@ in the options:
 cy.mount(StepperComponent, {
   componentProperties: {
     count: 100,
-    change: new EventEmitter(),
   },
 })
 ```
@@ -157,6 +156,26 @@ it('clicking + fires a change event with the incremented value', () => {
 })
 ```
 
+### Working with Legacy @Input() Decorators
+
+With the release of Angular 18, [signals](https://angular.dev/guide/signals) became the preferred way to handle data binding.
+However, legacy components that use `@Input()` and `@Output()` decorators are still supported.
+
+Interacting with legacy `@Input()` decorators is a bit different than working with signals.
+In order to update the `@Input()` value, you need to use the `componentRef.setInput` method so Angular change detection runs properly.
+Otherwise, you may see errors.
+
+```ts
+cy.mount(StepperComponent, { componentProperties: { count: 100 } })
+  .then(({ fixture }) => {
+    return cy.contains('span', '100').wrap(fixture)
+  })
+  .then((fixture) => {
+    fixture.componentRef.setInput('count', 110)
+    return cy.contains('span', '110')
+  })
+```
+
 ### Using createOutputSpy()
 
 To make spying on event emitters easier, there is a utility function called
@@ -179,7 +198,13 @@ it('clicking + fires a change event with the incremented value', () => {
 })
 ```
 
-### Using autoSpyOutputs
+### Using autoSpyOutputs (deprecated)
+
+:::caution
+
+The `autoSpyOutputs` flag is deprecated and not supported in `cypress/angular-zoneless` and will be removed in a future version.
+
+:::
 
 You might find yourself repeatedly creating a `cy.spy()` for each of your
 component outputs. Because of this, we created an easy mechanism to handle this
@@ -208,17 +233,8 @@ function. It currently does not work with the template syntax.
 
 :::
 
-:::caution
-
-`autoSpyOutput` is an **experimental feature** and could be removed or changed
-in the future
-
-:::
-
 ### Signals
 
-With the releases of Angular versions [17.1](https://github.com/angular/angular/blob/main/CHANGELOG.md#1710-2024-01-17) and [17.2](https://github.com/angular/angular/blob/main/CHANGELOG.md#1720-2024-02-14), [input](https://github.com/angular/angular/pull/53521) and [model](https://github.com/angular/angular/pull/54252) signals were introduced into the `@angular/core` API. Though basic signals were introduced in Angular `16`, using all signals requires Angular `17.2` and above.
-
 :::info
 
 With Cypress 14, signal support is directly included in the `cypress/angular` testing harness.
@@ -434,7 +450,13 @@ This custom mount command will allow you to skip manually passing in the
 `ButtonComponent` and `CardComponent` as declarations into each `cy.mount()`
 call.
 
-### autoSpyOutputs
+### autoSpyOutputs (deprecated)
+
+:::caution
+
+The `autoSpyOutputs` flag is deprecated and not supported in `cypress/angular-zoneless` and will be removed in a future version.
+
+:::
 
 Here is an example of defaulting `autoSpyOutputs` for every mounted component:
 

docs/app/component-testing/angular/overview.mdx

@@ -20,11 +20,12 @@ sidebar_label: Overview
 
 ## Framework Support
 
-Cypress Component Testing supports Angular `^18.0.0`, `^19.0.0`, and `^20.0.0`.
+Cypress Component Testing supports Angular `^18.0.0`, `^19.0.0`, `^20.0.0`, and `^21.0.0`.
 
 :::info
 
 Our testing harness, `cypress/angular`, still requires `zone.js` and `@angular-devkit/build-angular` to be installed in your project, even if your project is zoneless or is built with `@angular/build`.
+If you wish to use the zoneless configuration, which is the default in Angular 21, you can use `cypress/angular-zoneless` testing harness instead as of Cypress `15.8.0`.
 :::
 
 ## Tutorial
@@ -129,5 +130,5 @@ export default {
 
 #### Sample Angular Apps
 
-- [Angular 18](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/angular)
 - [Angular 20 Standalone](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/angular-standalone)
+- [Angular 21 Zoneless](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/angular-zoneless)

docs/app/component-testing/get-started.mdx

@@ -47,7 +47,7 @@ following development servers and frameworks:
 | [Next.js 14-16](/app/component-testing/react/overview#Nextjs)                                                      | React 18-19   | Webpack 5 |
 | [Vue with Vite](/app/component-testing/vue/overview#Vue-with-Vite)                                                 | Vue 3         | Vite 5-7  |
 | [Vue with Webpack](/app/component-testing/vue/overview#Vue-with-Webpack)                                           | Vue 3         | Webpack 5 |
-| [Angular](/app/component-testing/angular/overview#Framework-Configuration)                                         | Angular 18-20 | Webpack 5 |
+| [Angular](/app/component-testing/angular/overview#Framework-Configuration)                                         | Angular 18-21 | Webpack 5 |
 | [Svelte with Vite](/app/component-testing/svelte/overview#Svelte-with-Vite) <Badge type="info">Alpha</Badge>       | Svelte 5      | Vite 5-7  |
 | [Svelte with Webpack](/app/component-testing/svelte/overview#Svelte-with-Webpack) <Badge type="info">Alpha</Badge> | Svelte 5      | Webpack 5 |