@@ -151,6 +151,47 @@ describe('Counter', () => {
151
151
});
152
152
```
153
153
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
+
154
195
[ See more examples] ( https://github.com/testing-library/angular-testing-library/tree/main/apps/example-app/src/app/examples )
155
196
156
197
## Installation
0 commit comments