---
id: app/component-testing/angular/api
title: Angular API
description: API for mounting Angular components in Cypress tests.
section: app
source_path: docs/app/component-testing/angular/api.mdx
version: 7ada28c0cd90e81cf56fd3fc73de6e6d45c16de6
updated_at: '2026-05-13T21:55:41.935Z'
---
# Angular API

## Methods

### mount

```
// for Angular 20 and 21 using zoneless configurationimport { mount } from 'cypress/angular-zoneless'
```

```
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')})// orit('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>autoSpyOutputs (deprecated)</td><td>boolean (optional)</td><td><p>flag to automatically create a cy.spy() for every component @Output() property. This is deprecated and not supported in <code>cypress/angular-zoneless</code> and will be removed in a future version</p></td></tr><tr><td>autoDetectChanges (deprecated)</td><td>boolean (optional)</td><td><p>flag defaulted to true to automatically detect changes in your components. This is deprecated and not supported in <code>cypress/angular-zoneless</code> and will be removed in a future version as it is not needed with zoneless configuration</p></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)