# Help with angular-output-target

**URL:** <https://forum.ionicframework.com/t/help-with-angular-output-target/247650>\
**Category:** Stencil\
**Created:** [April 23, 2025, 11:19pm UTC](https://forum.ionicframework.com/t/help-with-angular-output-target/247650 "2025-04-23T23:19:19Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![azCoder78](https://avatars.discourse-cdn.com/v4/letter/a/f07891/32.png) [@azCoder78](https://forum.ionicframework.com/u/azCoder78)\
**Post date:** [April 23, 2025, 11:19pm UTC](https://forum.ionicframework.com/t/help-with-angular-output-target/247650/1 "2025-04-23T23:19:19Z")

</div>

Hey there! Im new to the forum and to Stencil.js. Im writing a toggle switch component in which i need to compile it for angular and React. I’ve installed the angular-output-target. The component builds and the the files are generated in the angular folder of the component. I added the component to a test angular app but im getting errors.

I originally followed this doc [Angular Integration with Stencil | Stencil](https://stenciljs.com/docs/angular)

The issue, is, ngModel doesn’t work out of the box. I read the doc located here [Angular Integration with Stencil | Stencil](https://stenciljs.com/docs/angular#valueaccessorconfigs)

But the example did not work for me. Or im just not understanding it.

This image shows my project structure. My design system will treat each component separately so developers can select what components they want to install.

After following the doc and running the build, i get the “angular” folder structure in the image.

 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/9/5/957d46a1d91e6e3c5921de497478e78ce4e44ea6.png)

Here is my stencil.config.ts file

```auto
import { Config } from '@stencil/core';
import { sass } from '@stencil/sass';
import { reactOutputTarget } from '@stencil/react-output-target';
import { angularOutputTarget, ValueAccessorConfig } from '@stencil/angular-output-target';

const angularValueAccessorBindings: ValueAccessorConfig[] = [
  {
    elementSelectors: ['atria-toggle-switch'],
    event: 'valueChange',
    targetAttr: 'checked',
    type: 'boolean'
  }
];

export const config: Config = {
  namespace: 'toggle-switch',
  plugins: [
    sass() 
  ],
  outputTargets: [
    {
      type: 'dist',
      esmLoaderPath: '../loader'
    },
    {
      type: 'dist-custom-elements',
      externalRuntime: false
    },
    {
      type: 'docs-readme'
    },
    {
      type: 'www',
      serviceWorker: null
    },
    reactOutputTarget({
      outDir: 'react/',
      esModules: true,
    }),
    angularOutputTarget({
      componentCorePackage: '@banneratria/toggle-switch',
      directivesProxyFile: 'angular/toggle-switch-proxies.ts',
      directivesArrayFile: 'angular/index.ts',
      valueAccessorConfigs: angularValueAccessorBindings,
      outputType: 'standalone'
    })
  ]
};

```

and here is my package.json file

```auto
{
  "name": "@banneratria/toggle-switch",
  "version": "0.0.2",
  "main": "dist/index.cjs.js",                    
  "module": "dist/index.mjs",                       
  "collection": "dist/collection/collection-manifest.json",
  "customElements": "dist/custom-elements/index.js",
  "files": [
    "dist/",
    "loader/",
    "angular/",
    "index.d.ts"
  ],
  "types": "dist/types/dist/index.d.js",
  "scripts": {
    "build": "stencil build",
    "start": "stencil build --dev --watch"
  },
  "dependencies": {},
  "devDependencies": {
    "@stencil/core": "^4.0.0",
    "@stencil/sass": "^1.5.2",
    "@stencil/react-output-target": "^0.8.2",
    "@stencil/angular-output-target": "^0.10.2",
    "sass": "^1.66.1"
  }
}

```

this is what was generated in the index.ts file

```auto
import * as d from './toggle-switch-proxies';

export const DIRECTIVES = [
  d.AtriaToggleSwitch
];

```

When i go to consume this package in angular 19. Im importing it like this in the component file that will be using my toggle switch component

```auto
import { DIRECTIVES } from '@banneratria/toggle-switch/angular';

@Component({
  standalone: true,
  selector: 'bh-button',
  templateUrl: './button.component.html',
  styleUrl: './button.component.scss',
  imports: [CanvasComponent, CommonModule, DIRECTIVES],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

```

Im getting the following error

```auto
Unable to import component AtriaToggleSwitch.
  The symbol is not exported from /Users/venVBennen/Documents/Projects/Atria Design System/Atria-playground/atria-playground/node_modules/@banneratria/toggle-switch/angular/index.ts (module '@banneratria/toggle-switch/angular').(-993004)
toggle-switch-proxies.ts(8, 20): The component is declared here.
class AtriaButtonComponent

```

this is how im hoping to use. the toggle switch

```auto
<atria-toggle-switch 
    label="Loading state" 
    [(ngModel)]="buttonLoading" 
    (value)="updateComponentProperties($event)">
</atria-toggle-switch>

```

Can anyone shed some light on what im doing wrong? Does anyone have experience adding ngModel to a stencil component. I have created two other components (button and tabs) in stencil and used them successfully in angular however neither used ngModel for two way binding.

---

<div class="post-metadata">

**Author:** ![azCoder78](https://avatars.discourse-cdn.com/v4/letter/a/f07891/32.png) [@azCoder78](https://forum.ionicframework.com/u/azCoder78)\
**Post date:** [April 28, 2025, 10:35pm UTC](https://forum.ionicframework.com/t/help-with-angular-output-target/247650/2 "2025-04-28T22:35:25Z")

</div>

Anyone know about this?