diff --git a/docs/app/component-testing/angular/api.mdx b/docs/app/component-testing/angular/api.mdx
index b7bed7f604..6197fede27 100644
--- a/docs/app/component-testing/angular/api.mdx
+++ b/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()
| Description |
- | autoSpyOutputs |
+ autoSpyOutputs (deprecated) |
boolean (optional) |
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
|
- | autoDetectChanges |
+ autoDetectChanges (deprecated) |
boolean (optional) |
- 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
|
diff --git a/docs/app/component-testing/angular/examples.mdx b/docs/app/component-testing/angular/examples.mdx
index 75eab39e05..1699246f35 100644
--- a/docs/app/component-testing/angular/examples.mdx
+++ b/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:
diff --git a/docs/app/component-testing/angular/overview.mdx b/docs/app/component-testing/angular/overview.mdx
index 235d813e2c..2850ba9e0e 100644
--- a/docs/app/component-testing/angular/overview.mdx
+++ b/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)
diff --git a/docs/app/component-testing/get-started.mdx b/docs/app/component-testing/get-started.mdx
index cbf9b3f79b..8e417a8ae0 100644
--- a/docs/app/component-testing/get-started.mdx
+++ b/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) Alpha | Svelte 5 | Vite 5-7 |
| [Svelte with Webpack](/app/component-testing/svelte/overview#Svelte-with-Webpack) Alpha | Svelte 5 | Webpack 5 |