Skip to content

Commit e15d052

Browse files
committed
chore: add angular 21 documentation
1 parent cd8cb90 commit e15d052

File tree

3 files changed

+20
-2
lines changed

3 files changed

+20
-2
lines changed

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,24 @@ it('clicking + fires a change event with the incremented value', () => {
157157
})
158158
```
159159

160+
### Working with Legacy @Input() Decorators
161+
162+
With the release of Angular 18, [signals](https://angular.dev/guide/signals) became the preferred way to handle data binding.
163+
However, legacy components that use `@Input()` and `@Output()` decorators are still supported.
164+
165+
Interacting with legacy `@Input()` decorators is a bit different than working with signals.
166+
In order to update the `@Input()` value, you need to use the `componentRef.setInput` method so Angular change detection runs properly.
167+
Otherwise, you may see errors.
168+
169+
```ts
170+
cy.mount(StepperComponent, { componentProperties: { count: 100 } }).then(({ fixture }) => {
171+
return cy.contains('span', '100').wrap(fixture)
172+
}).then((fixture) => {
173+
fixture.componentRef.setInput('count', 110)
174+
return cy.contains('span', '110')
175+
})
176+
```
177+
160178
### Using createOutputSpy()
161179

162180
To make spying on event emitters easier, there is a utility function called

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ sidebar_label: Overview
2020

2121
## Framework Support
2222

23-
Cypress Component Testing supports Angular `^18.0.0`, `^19.0.0`, and `^20.0.0`.
23+
Cypress Component Testing supports Angular `^18.0.0`, `^19.0.0`, `^20.0.0`, and `^21.0.0`.
2424

2525
:::info
2626

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ following development servers and frameworks:
4747
| [Next.js 14-16](/app/component-testing/react/overview#Nextjs) | React 18-19 | Webpack 5 |
4848
| [Vue with Vite](/app/component-testing/vue/overview#Vue-with-Vite) | Vue 3 | Vite 5-7 |
4949
| [Vue with Webpack](/app/component-testing/vue/overview#Vue-with-Webpack) | Vue 3 | Webpack 5 |
50-
| [Angular](/app/component-testing/angular/overview#Framework-Configuration) | Angular 18-20 | Webpack 5 |
50+
| [Angular](/app/component-testing/angular/overview#Framework-Configuration) | Angular 18-21 | Webpack 5 |
5151
| [Svelte with Vite](/app/component-testing/svelte/overview#Svelte-with-Vite) <Badge type="info">Alpha</Badge> | Svelte 5 | Vite 5-7 |
5252
| [Svelte with Webpack](/app/component-testing/svelte/overview#Svelte-with-Webpack) <Badge type="info">Alpha</Badge> | Svelte 5 | Webpack 5 |
5353

0 commit comments

Comments
 (0)