---
id: app/write-tests/component-testing/angular/api
title: Angular API
description: API for mounting Angular components in Cypress tests.
section: app
source_path: docs/app/write-tests/component-testing/angular/api.mdx
version: 066c46e056f0f322a0670d2d3aa4e6adaebfe717
updated_at: '2026-09-10T13:30:12.426Z'
---
# Angular API

The `cypress/angular` module provides the following methods and interfaces for mounting and testing Angular components.

## mount

```
import { mount } from 'cypress/angular'
```

<table><tbody><tr><td>Description</td><td>Mounts an Angular component inside Cypress browser</td></tr><tr><td>Signature</td><td><p>mount&lt;T&gt;(component: Type&lt;T&gt; | string, config?: MountConfig&lt;T&gt;): Cypress.Chainable&lt;MountResponse&lt;T&gt;&gt;</p></td></tr><tr><td>Returns</td><td>Cypress.Chainable&lt;MountResponse&gt;</td></tr></tbody></table>

<table><caption>mount Parameters</caption><thead></thead><tbody><tr><td>Name</td><td>Type</td><td>Description</td></tr><tr><td>component</td><td>Type&lt;T&gt; | string</td><td>Angular component being mounted or its template</td></tr><tr><td>config</td><td></td><td>MountConfig&lt;T&gt; (optional)</td></tr></tbody></table>

### Example

```
import { mount } from '@cypress/angular'
import { StepperComponent } from './stepper.component'
import { MyService } from 'services/my.service'
import { SharedModule } from 'shared/shared.module'
it('mounts', () => {
  mount(StepperComponent, {
    providers: [MyService],
    imports: [SharedModule],
  })
  cy.get('[data-cy=increment]').click()
  cy.get('[data-cy=counter]').should('have.text', '1')
})

// or

it('mounts with template', () => {
  mount('<app-stepper></app-stepper>', {
    declarations: [StepperComponent],
  })
})
```

## createOutputSpy

```
import { createOutputSpy } from 'cypress/angular'
```

<table><tbody><tr><td>Description</td><td>Creates a new Event Emitter and then spies on it's <code>emit</code> method</td></tr><tr><td>Signature</td><td>(alias: string) =&gt; any</td></tr><tr><td>Returns</td><td>EventEmitter&lt;T&gt;</td></tr></tbody></table>

<table><caption>createOutputSpy parameters</caption><thead></thead><tbody><tr><td>Name</td><td>Type</td><td>Description</td></tr><tr><td>alias</td><td>string</td><td>alias name you want to use for your cy.spy() alias</td></tr></tbody></table>

### Example

```
import { StepperComponent } from './stepper.component'
import { mount, createOutputSpy } from '@cypress/angular'

it('Has spy', () => {
  mount(StepperComponent, { change: createOutputSpy('changeSpy') })
  cy.get('[data-cy=increment]').click()
  cy.get('@changeSpy').should('have.been.called')
})
```

## Interfaces

### MountConfig

Additional module configurations needed while mounting the component, like providers, declarations, imports and even component @Inputs()

<table><caption>members</caption><thead></thead><tbody><tr><td>Name</td><td>Type</td><td>Description</td></tr><tr><td>componentProperties</td><td><p>Partial&lt;{[P in keyof T]: T[P] extends InputSignal&lt;infer V&gt; ? InputSignal&lt;V&gt; | WritableSignal&lt;V&gt; | V : T[P]}&gt; (optional)</p></td><td><p>signal based inference types need only apply if you are using signals within your component tests</p></td></tr></tbody></table>

### MountResponse

Type that the `mount` function yields

<table><caption>members</caption><thead></thead><tbody><tr><td>Name</td><td>Type</td><td>Description</td></tr><tr><td>fixture</td><td>ComponentFixture&lt;T&gt;</td><td>Fixture for debugging and testing a component.</td></tr><tr><td>component</td><td>T</td><td>The instance of the root component class</td></tr></tbody></table>

See [https://angular.io/api/core/testing/ComponentFixture#componentInstance](https://angular.io/api/core/testing/ComponentFixture#componentInstance)