@@ -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