Skip to content

Commit 3dca2ea

Browse files
Add documentation for Angular v20 bindings API
Co-authored-by: timdeschryver <[email protected]>
1 parent 6a6d336 commit 3dca2ea

File tree

1 file changed

+41
-0
lines changed

1 file changed

+41
-0
lines changed

README.md

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -151,6 +151,47 @@ describe('Counter', () => {
151151
});
152152
```
153153

154+
### Angular v20+ Bindings API
155+
156+
Angular Testing Library also supports Angular v20's native bindings API, which provides a more direct way to bind inputs and outputs:
157+
158+
```typescript
159+
import { render, screen, inputBinding, outputBinding } from '@testing-library/angular';
160+
import { CounterComponent } from './counter.component';
161+
162+
describe('Counter with Bindings API', () => {
163+
it('should render counter using bindings', async () => {
164+
await render(CounterComponent, {
165+
bindings: [inputBinding('counter', () => 5), inputBinding('greeting', () => 'Hello Bindings!')],
166+
});
167+
168+
expect(screen.getByText('Current Count: 5')).toBeVisible();
169+
expect(screen.getByText('Hello Bindings!')).toBeVisible();
170+
});
171+
172+
it('should handle outputs with bindings', async () => {
173+
const clickHandler = jest.fn();
174+
175+
await render(CounterComponent, {
176+
bindings: [inputBinding('counter', () => 0), outputBinding('counterChange', clickHandler)],
177+
});
178+
179+
const incrementButton = screen.getByRole('button', { name: '+' });
180+
fireEvent.click(incrementButton);
181+
182+
expect(clickHandler).toHaveBeenCalledWith(1);
183+
});
184+
});
185+
```
186+
187+
The new bindings API provides several benefits:
188+
189+
- **Native Angular Integration**: Uses Angular's official bindings API
190+
- **Better Performance**: Bindings are handled natively by Angular
191+
- **Improved Type Safety**: Leverages Angular's built-in type checking
192+
193+
Both approaches are supported and can be used interchangeably based on your preference and Angular version.
194+
154195
[See more examples](https://github.com/testing-library/angular-testing-library/tree/main/apps/example-app/src/app/examples)
155196

156197
## Installation

0 commit comments

Comments
 (0)