const heroForm = new FormGroup({
  'name': new FormControl(),
  'alterEgo': new FormControl(),
  'power': new FormControl()
}, { validators: identityRevealedValidator });
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">const</span> heroForm<span class="token operator">:</span> <span class="token builtin">any</span></code></pre>

profileForm = new FormGroup({
  firstName: new FormControl(''),
  lastName: new FormControl(''),
  address: new FormGroup({
    street: new FormControl(''),
    city: new FormControl(''),
    state: new FormControl(''),
    zip: new FormControl('')
  })
});
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token builtin">any</span></code></pre>

const heroForm = new FormGroup({
  'name': new FormControl(),
  'alterEgo': new FormControl(),
  'power': new FormControl()
});
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">const</span> heroForm<span class="token operator">:</span> <span class="token builtin">any</span></code></pre>

this.heroForm = new FormGroup({
  name: new FormControl(this.hero.name, [
    Validators.required,
    Validators.minLength(4),
    forbiddenNameValidator(/bob/i) // <-- Here's how you pass in the custom validator.
  ]),
  alterEgo: new FormControl(this.hero.alterEgo),
  power: new FormControl(this.hero.power, Validators.required)
});
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">this</span><span class="token operator">:</span> <span class="token keyword">typeof</span> globalThis</code></pre>

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-profile-editor',
  templateUrl: './profile-editor.component.html',
  styleUrls: ['./profile-editor.component.css']
})
export class ProfileEditorComponent {
  profileForm = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
  });
}
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token punctuation">(</span>alias<span class="token punctuation">)</span> <span class="token keyword">interface</span> <span class="token class-name">Component</span>
<span class="token punctuation">(</span>alias<span class="token punctuation">)</span> <span class="token keyword">const</span> Component<span class="token operator">:</span> ComponentDecorator
<span class="token keyword">import</span> Component</code><div class="typing-tooltip-markup">Supplies configuration metadata for an Angular component.
Component decorator and metadata.<br><br><em>@publicApi</em><br><br><em>@Annotation</em><br><br><em>@publicApi</em></div></pre>

await render(AppComponent, {
  providers: [
    CustomersService,
    {
      provide: MAX_CUSTOMERS_TOKEN,
      useValue: 10,
    },
  ],
})
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token builtin">any</span></code></pre>

await render(AppComponent, {
  imports: [AppSharedModule, MaterialModule],
})
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token builtin">any</span></code></pre>

await render(AppComponent, {
  declarations: [ChildComponent],
  routes: [
    {
      path: '',
      children: [
        {
          path: 'child/:id',
          component: ChildComponent,
        },
      ],
    },
  ],
})
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token builtin">any</span></code></pre>

await render(SpoilerDirective, {
  template: `<div spoiler message='SPOILER'></div>`,
})
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token builtin">any</span></code></pre>

await render(AppComponent, {
  queries: {...queries, ...customQueries},
})
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token builtin">any</span></code></pre>

const {debug} = await render(AppComponent)

debug()
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">const</span> debug<span class="token operator">:</span> <span class="token builtin">any</span></code></pre>

const {getByText, queryByLabelText} = await render(AppComponent)

getByText('Hello world')
queryByLabelText('First name:')
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">const</span> getByText<span class="token operator">:</span> <span class="token builtin">any</span></code></pre>

import {render, screen, fireEvent} from '@testing-library/angular'
import {CounterComponent} from './counter.component.ts'

describe('Counter', () => {
  test('should render counter', async () => {
    await render(CounterComponent, {
      componentProperties: {counter: 5},
    })

    expect(screen.getByText('Current Count: 5'))
  })

  test('should increment the counter on click', async () => {
    await render(CounterComponent, {
      componentProperties: {counter: 5},
    })

    fireEvent.click(screen.getByText('+'))

    expect(screen.getByText('Current Count: 6'))
  })
})
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token punctuation">(</span>alias<span class="token punctuation">)</span> <span class="token keyword">function</span> <span class="token generic-function"><span class="token function">render</span><span class="token generic class-name"><span class="token operator">&lt;</span>ComponentType<span class="token operator">></span></span></span><span class="token punctuation">(</span>component<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">,</span> renderOptions<span class="token operator">?</span><span class="token operator">:</span> RenderComponentOptions<span class="token operator">&lt;</span>ComponentType<span class="token operator">></span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token generic-function"><span class="token function">Promise</span><span class="token generic class-name"><span class="token operator">&lt;</span>RenderResult<span class="token operator">&lt;</span>ComponentType<span class="token punctuation">,</span> ComponentType<span class="token operator">>></span></span></span> <span class="token punctuation">(</span><span class="token operator">+</span><span class="token number">2</span> overloads<span class="token punctuation">)</span>
<span class="token keyword">import</span> render</code></pre>