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)

Score

64.8

Supply Chain

81.9

Quality

79.1

Maintenance

100

Vulnerability

99.6

License

Pull Requests

Open

15

Total

405

Closed

109

Merged

281

Issues

Open

69

Total

204

Closed

135

Releases

29

@stencil/angular-output-target@0.9.0

Updated on Aug 28, 2024

v0.7.1

@stencil/react-output-target@0.7.1

Updated on Aug 28, 2024

@stencil/react-output-target@0.7.0

Updated on Aug 27, 2024

@stencil/react-output-target@0.6.0

Updated on Aug 15, 2024

@stencil/vue-output-target@0.8.9

Updated on Aug 05, 2024

@stencil/vue-output-target@0.8.8

Updated on Mar 26, 2024

View All 29 releases

Contributors

59

View All 59 Contributors

Languages

5

TypeScript

Vue

CSS

JavaScript

HTML

TypeScript (97.33%)

Vue (1.03%)

CSS (0.68%)

JavaScript (0.67%)

HTML (0.3%)

Love this project? Help keep it running — sponsor us today! 🚀

Developer

ionic-team

Download Statistics

Total Downloads

268

Last Day

1

Last Week

3

Last Month

10

Last Year

57

GitHub Statistics

MIT License

252 Stars

505 Commits

121 Forks

15 Watchers

48 Branches

59 Contributors

Updated on Feb 17, 2025

Bundle Size

7.47 kB

Minified

2.99 kB

Minified + Gzipped

Bundlephobia

Maintainers

3

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

27

NPM Version

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

Node Version

18.8.0

Total Downloads

Cumulative downloads

Total Downloads

268

Last Day

0%

1

Compared to previous day

Last Week

50%

3

Compared to previous week

Last Month

150%

10

Compared to previous month

Last Year

-38.7%

57

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

1

@stencil/core

Dev Dependencies

2

@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.

10

Maintained

Determines if the project is "actively maintained".

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

10

License

Determines if the project has defined a license.

10

Security-Policy

Determines if the project has published a security policy.

5

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

3

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

Score

6

/10

Last Scanned on 2025-02-10

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More