npmpackage.info

Gathering detailed insights and metrics for @duetds/stencil-angular-output-target-next

@duetds/stencil-angular-output-target-next - 1.0.1 | npmpackage.info

@duetds/stencil-angular-output-target-next

These are output targets that can be added to Stencil for React and Angular.

1.0.1

257

MIT

TypeScript

67.57 kB

Installations

npm install @duetds/stencil-angular-output-target-next

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

18.8.0

NPM Version

lerna/5.5.0/node@v18.8.0+arm64 (darwin)

Pull Requests

Open

8

Total

453

Closed

139

Merged

306

Issues

Open

84

Total

229

Closed

145

Releases

@stencil/react-output-target@1.2.0

Updated on Jul 10, 2025

@stencil/angular-output-target@1.1.0

Updated on Jun 27, 2025

@stencil/react-output-target@1.1.1

Updated on Jun 27, 2025

@stencil/react-output-target@1.1.0

Updated on Jun 17, 2025

@stencil/angular-output-target@1.0.0

Updated on Jun 17, 2025

@stencil/vue-output-target@0.10.8

Updated on Jun 17, 2025

View All 43 releases

Languages

TypeScript

SCSS

CSS

Vue

JavaScript

HTML

TypeScript (93.3%)

SCSS (2.08%)

CSS (1.88%)

Vue (1.29%)

JavaScript (0.87%)

HTML (0.59%)

Developer

ionic-team

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

257 Stars

586 Commits

136 Forks

15 Watchers

44 Branches

56 Contributors

Updated on Jul 10, 2025

Maintainers

View All 56 Contributors

Package Meta Information

Latest Version

1.0.1

Package Id

@duetds/stencil-angular-output-target-next@1.0.1

Unpacked Size

67.57 kB

Size

10.61 kB

File Count

NPM Version

lerna/5.5.0/node@v18.8.0+arm64 (darwin)

Node Version

18.8.0

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

@stencil/core

Dev Dependencies

@angular/core @angular/forms

@stencil/angular-output-target

Stencil can generate Angular component wrappers for your web components. This allows your Stencil components to be used within an Angular application. The benefits of using Stencil's component wrappers over the standard web components include:

Angular component wrappers will be detached from change detection, preventing unnecessary repaints of your web component.
Web component events will be converted to RxJS observables to align with Angular's @Output() and will not emit across component boundaries.
Optionally, form control web components can be used as control value accessors with Angular's reactive forms or [ngModel].

For a detailed guide on how to add the angular output target to a project, visit: https://stenciljs.com/docs/angular.

Installation

1npm install @stencil/angular-output-target

Usage

In your stencil.config.ts add the following configuration to the outputTargets section:

1import { Config } from '@stencil/core';
2import { angularOutputTarget } from '@stencil/angular-output-target';
3
4export const config: Config = {
5  namespace: 'demo',
6  outputTargets: [
7    angularOutputTarget({
8      componentCorePackage: 'example-component-library',
9      directivesProxyFile: '../component-library-angular/src/directives/proxies.ts',
10      directivesArrayFile: '../component-library-angular/src/directives/index.ts',
11    }),
12    {
13      type: 'dist',
14      esmLoaderPath: '../loader',
15    },
16  ],
17};

Config Options

Property	Description
`componentCorePackage`	The NPM package name of your Stencil component library. This package is used as a dependency for your Angular wrappers.
`directivesProxyFile`	The output file of all the component wrappers generated by the output target. This file path should point to a location within your Angular library/project.
`directivesArrayFile`	The output file of a constant of all the generated component wrapper classes. Used for easily declaring and exporting the generated components from an `NgModule`. This file path should point to a location within your Angular library/project.
`valueAccessorConfigs`	The configuration object for how individual web components behave with Angular control value accessors.
`excludeComponents`	An array of tag names to exclude from generating component wrappers for. This is helpful when have a custom framework implementation of a specific component or need to extend the base component wrapper behavior.
`includeImportCustomElements`	If `true`, the output target will import the custom element instance and register it with the Custom Elements Registry when the component is imported inside of a user's app. This can only be used with the Custom Elements Bundle and will not work with lazy loaded components.
`customElementsDir`	This is the directory where the custom elements are imported from when using the Custom Elements Bundle. Defaults to the `components` directory. Only applies when `includeImportCustomElements` is `true`.

No vulnerabilities found.

No security vulnerabilities found.