add angular code samples

docs/dom-testing-library/api-configuration.mdx

@@ -21,8 +21,15 @@ The library can be configured via the `configure` function, which accepts:
 > Framework-specific wrappers like React Testing Library may add more options to
 > the ones shown below.
 
-<Tabs defaultValue="native" values={[ { label: 'Native', value: 'native', }, {
-label: 'React', value: 'react', }, { label: 'Cypress', value: 'cypress', }, ] }>
+<Tabs
+  defaultValue="native"
+  values={[
+    { label: 'Native', value: 'native', },
+    { label: 'React', value: 'react', },
+    { label: 'Angular', value: 'angular', },
+    { label: 'Cypress', value: 'cypress', },
+  ]
+}>
 <TabItem value="native">
 
 ```js title="setup-tests.js"
@@ -47,6 +54,19 @@ configure({
 import {configure} from '@testing-library/react'
 
 configure({testIdAttribute: 'data-my-test-id'})
+```
+
+  </TabItem>
+  <TabItem value="angular">
+
+```ts title="setup-tests.ts"
+import {configure} from '@testing-library/angular'
+
+configure({
+  dom: {
+    testIdAttribute: 'data-my-test-id',
+  },
+})
 ```
 
   </TabItem>

docs/dom-testing-library/api-events.mdx

@@ -136,12 +136,13 @@ fireEvent(
 
 [Jest's Mock functions](https://jestjs.io/docs/en/mock-functions) can be used to
 test that a component will call its bound callback in response to a particular
-event. 
+event.
 
   <Tabs
     defaultValue="react"
     values={[
-      { label: 'React', value: 'react', }
+      { label: 'React', value: 'react', },
+      { label: 'Angular', value: 'angular', },
     ]
   }>
   <TabItem value="react">
@@ -159,6 +160,31 @@ test('calls onClick prop when clicked', () => {
   fireEvent.click(screen.getByText(/click me/i))
   expect(handleClick).toHaveBeenCalledTimes(1)
 })
+```
+
+  </TabItem>
+  <TabItem value="angular">
+
+```ts
+import {render, screen, fireEvent} from '@testing-library/angular'
+
+@Component({
+  template: `<button (click)="handleClick.emit()">Click Me</button>`,
+})
+class ButtonComponent {
+  @Output() handleClick = new EventEmitter<void>()
+}
+
+test('calls onClick prop when clicked', async () => {
+  const handleClick = jest.fn()
+  await render(ButtonComponent, {
+    componentOutputs: {
+      handleClick: {emit: handleClick} as any,
+    },
+  })
+  await fireEvent.click(screen.getByText(/click me/i))
+  expect(handleClick).toHaveBeenCalledTimes(1)
+})
 ```
 
   </TabItem>

docs/dom-testing-library/api-within.mdx

@@ -19,6 +19,7 @@ could do:
     values={[
       { label: 'Native', value: 'native', },
       { label: 'React', value: 'react', },
+      { label: 'Angular', value: 'angular', },
       { label: 'Cypress', value: 'cypress', },
     ]
   }>
@@ -40,6 +41,17 @@ import {render, within} from '@testing-library/react'
 const {getByText} = render(<MyComponent />)
 const messages = getByText('messages')
 const helloMessage = within(messages).getByText('hello')
+```
+
+  </TabItem>
+  <TabItem value="angular">
+
+```ts
+import {render, within} from '@testing-library/angular'
+
+const {getByText} = await render(MyComponent)
+const messages = getByText('messages')
+const helloMessage = within(messages).getByText('hello')
 ```
 
   </TabItem>

docs/queries/about.mdx

@@ -187,8 +187,15 @@ React Testing Library re-export `screen` so you can use it the same way.
 
 Here's how you use it:
 
-<Tabs defaultValue="native" values={[ { label: 'Native', value: 'native', }, {
-label: 'React', value: 'react', }, { label: 'Cypress', value: 'cypress', }, ] }>
+<Tabs
+  defaultValue="native"
+  values={[
+    { label: 'Native', value: 'native', },
+    { label: 'React', value: 'react', },
+    { label: 'Angular', value: 'angular', },
+    { label: 'Cypress', value: 'cypress', },
+  ]
+}>
 <TabItem value="native">
 
 ```js
@@ -215,6 +222,22 @@ render(
   </div>,
 )
 
+const exampleInput = screen.getByLabelText('Example')
+```
+
+  </TabItem>
+  <TabItem value="angular">
+
+```ts
+import {render, screen} from '@testing-library/angular'
+
+await render(`
+  <div>
+    <label for="example">Example</label>
+    <input id="example" />
+  </div>
+`)
+
 const exampleInput = screen.getByLabelText('Example')
 ```
 
@@ -295,8 +318,9 @@ can contain options that affect the precision of string matching:
 - `exact`: Defaults to `true`; matches full strings, case-sensitive. When false,
   matches substrings and is not case-sensitive.
   - `exact` has no effect on `regex` or `function` arguments.
-  - `exact` has no effect on accessible names specified with the `name` option of `*byRole`
-    queries. You can use a regex for fuzzy matching on accessible names.
+  - `exact` has no effect on accessible names specified with the `name` option
+    of `*byRole` queries. You can use a regex for fuzzy matching on accessible
+    names.
   - In most cases using a regex instead of a string gives you more control over
     fuzzy matching and should be preferred over `{ exact: false }`.
 - `normalizer`: An optional function which overrides normalization behavior. See

docs/queries/byalttext.mdx

@@ -37,8 +37,15 @@ as it's deprecated).
 <img alt="Incredibles 2 Poster" src="/incredibles-2.png" />
 ```
 
-<Tabs defaultValue="native" values={[ { label: 'Native', value: 'native', }, {
-label: 'React', value: 'react', }, { label: 'Cypress', value: 'cypress', }, ] }>
+<Tabs
+  defaultValue="native"
+  values={[
+    { label: 'Native', value: 'native', },
+    { label: 'React', value: 'react', },
+    { label: 'Angular', value: 'angular', },
+    { label: 'Cypress', value: 'cypress', },
+  ]
+}>
 <TabItem value="native">
 
 ```js
@@ -55,6 +62,16 @@ import {render, screen} from '@testing-library/react'
 
 render(<MyComponent />)
 const incrediblesPosterImg = screen.getByAltText(/incredibles.*? poster/i)
+```
+
+  </TabItem>
+  <TabItem value="angular">
+
+```ts
+import {render, screen} from '@testing-library/angular'
+
+await render(MyComponent)
+const incrediblesPosterImg = screen.getByAltText(/incredibles.*? poster/i)
 ```
 
   </TabItem>

docs/queries/bydisplayvalue.mdx

@@ -35,8 +35,15 @@ display value.
 document.getElementById('lastName').value = 'Norris'
 ```
 
-<Tabs defaultValue="native" values={[ { label: 'Native', value: 'native', }, {
-label: 'React', value: 'react', }, { label: 'Cypress', value: 'cypress', }, ] }>
+<Tabs
+  defaultValue="native"
+  values={[
+    { label: 'Native', value: 'native', },
+    { label: 'React', value: 'react', },
+    { label: 'Angular', value: 'angular', },
+    { label: 'Cypress', value: 'cypress', },
+  ]
+}>
 <TabItem value="native">
 
 ```js
@@ -53,6 +60,16 @@ import {render, screen} from '@testing-library/react'
 
 render(<MyComponent />)
 const lastNameInput = screen.getByDisplayValue('Norris')
+```
+
+  </TabItem>
+  <TabItem value="angular">
+
+```ts
+import {render, screen} from '@testing-library/angular'
+
+await render(MyComponent)
+const lastNameInput = screen.getByDisplayValue('Norris')
 ```
 
   </TabItem>
@@ -75,8 +92,15 @@ cy.findByDisplayValue('Norris').should('exist')
 document.getElementById('messageTextArea').value = 'Hello World'
 ```
 
-<Tabs defaultValue="native" values={[ { label: 'Native', value: 'native', }, {
-label: 'React', value: 'react', }, { label: 'Cypress', value: 'cypress', }, ] }>
+<Tabs
+  defaultValue="native"
+  values={[
+    { label: 'Native', value: 'native', },
+    { label: 'React', value: 'react', },
+    { label: 'Angular', value: 'angular', },
+    { label: 'Cypress', value: 'cypress', },
+  ]
+}>
 <TabItem value="native">
 
 ```js
@@ -93,6 +117,16 @@ import {render, screen} from '@testing-library/react'
 
 render(<MyComponent />)
 const messageTextArea = screen.getByDisplayValue('Hello World')
+```
+
+  </TabItem>
+  <TabItem value="angular">
+
+```ts
+import {render, screen} from '@testing-library/angular'
+
+await render(MyComponent)
+const messageTextArea = screen.getByDisplayValue('Hello World')
 ```
 
   </TabItem>
@@ -119,8 +153,15 @@ matches the given [`TextMatch`](queries/about.mdx#textmatch).
 </select>
 ```
 
-<Tabs defaultValue="native" values={[ { label: 'Native', value: 'native', }, {
-label: 'React', value: 'react', }, { label: 'Cypress', value: 'cypress', }, ] }>
+<Tabs
+  defaultValue="native"
+  values={[
+    { label: 'Native', value: 'native', },
+    { label: 'React', value: 'react', },
+    { label: 'Angular', value: 'angular', },
+    { label: 'Cypress', value: 'cypress', },
+  ]
+}>
 <TabItem value="native">
 
 ```js
@@ -137,6 +178,16 @@ import {render, screen} from '@testing-library/react'
 
 render(<MyComponent />)
 const selectElement = screen.getByDisplayValue('Alaska')
+```
+
+  </TabItem>
+  <TabItem value="angular">
+
+```ts
+import {render, screen} from '@testing-library/angular'
+
+await render(MyComponent)
+const selectElement = screen.getByDisplayValue('Alaska')
 ```
 
   </TabItem>

docs/queries/bylabeltext.mdx

@@ -53,8 +53,15 @@ The example below will find the input node for the following DOM structures:
 <input aria-label="Username" />
 ```
 
-<Tabs defaultValue="native" values={[ { label: 'Native', value: 'native', }, {
-label: 'React', value: 'react', }, { label: 'Cypress', value: 'cypress', }, ] }>
+<Tabs
+  defaultValue="native"
+  values={[
+    { label: 'Native', value: 'native', },
+    { label: 'React', value: 'react', },
+    { label: 'Angular', value: 'angular', },
+    { label: 'Cypress', value: 'cypress', },
+  ]
+}>
 <TabItem value="native">
 
 ```js
@@ -71,6 +78,17 @@ import {render, screen} from '@testing-library/react'
 
 render(<Login />)
 
+const inputNode = screen.getByLabelText('Username')
+```
+
+  </TabItem>
+  <TabItem value="angular">
+
+```ts
+import {render, screen} from '@testing-library/angular'
+
+await render(Login)
+
 const inputNode = screen.getByLabelText('Username')
 ```
 
@@ -94,8 +112,8 @@ is robust against switching to `aria-label` or `aria-labelledby`.
 
 ### `selector`
 
-If it is important that you query a specific element (e.g. an `<input>`) you can provide a
-`selector` in the options:
+If it is important that you query a specific element (e.g. an `<input>`) you can
+provide a `selector` in the options:
 
 ```js
 // Multiple elements labelled via aria-labelledby

docs/queries/byplaceholdertext.mdx

@@ -29,8 +29,15 @@ matches the given [`TextMatch`](queries/about.mdx#textmatch).
 <input placeholder="Username" />
 ```
 
-<Tabs defaultValue="native" values={[ { label: 'Native', value: 'native', }, {
-label: 'React', value: 'react', }, { label: 'Cypress', value: 'cypress', }, ] }>
+<Tabs
+  defaultValue="native"
+  values={[
+    { label: 'Native', value: 'native', },
+    { label: 'React', value: 'react', },
+    { label: 'Angular', value: 'angular', },
+    { label: 'Cypress', value: 'cypress', },
+  ]
+}>
 <TabItem value="native">
 
 ```js
@@ -47,6 +54,16 @@ import {render, screen} from '@testing-library/react'
 
 render(<MyComponent />)
 const inputNode = screen.getByPlaceholderText('Username')
+```
+
+  </TabItem>
+  <TabItem value="angular">
+
+```ts
+import {render, screen} from '@testing-library/angular'
+
+await render(MyComponent)
+const inputNode = screen.getByPlaceholderText('Username')
 ```
 
   </TabItem>