npmpackage.info

@stencil/angular-output-target

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

0.10.2

251

MIT

TypeScript

3.75 kB

2,159,661 6

Installations

npm install @stencil/angular-output-target

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS, ESM

Node Version

20.10.0

NPM Version

10.2.3 Score

Supply Chain

82.3

Quality

93.2

Maintenance

100

Vulnerability

99.6

License

Pull Requests

Open

15

Total

405

Closed

109

Merged

281

Issues

Open

69

Total

204

Closed

135

Releases

@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

View All 59 Contributors

Languages

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

2,159,661

Last Day

286

Last Week

20,728

Last Month

77,786

Last Year

805,389

GitHub Statistics

MIT License

251 Stars

505 Commits

121 Forks

15 Watchers

48 Branches

59 Contributors

Updated on Feb 07, 2025

Bundle Size

9.08 kB

Minified

3.75 kB

Minified + Gzipped

Bundlephobia

Maintainers

Package Meta Information

Latest Version

0.10.2

Package Id

@stencil/angular-output-target@0.10.2

Unpacked Size

108.05 kB

Size

16.23 kB

File Count

NPM Version

10.2.3

Node Version

20.10.0

Published on

Dec 20, 2024

Total Downloads

Cumulative downloads

Total Downloads

2,159,661

Last Day

-48.8%

286

Compared to previous day

Last Week

10.2%

20,728

Compared to previous week

Last Month

63.9%

77,786

Compared to previous month

Last Year

5.2%

805,389

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

@stencil/core

Dev Dependencies

@angular/core @angular/forms @types/node npm-run-all2 rimraf rollup typescript vitest

@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: '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.
`outputType`	Specifies the type of output to be generated. It can take one of the following values: 1. `component`: Generates all the component wrappers to be declared on an Angular module. This option is required for Stencil projects using the `dist` hydrated output. 2. `scam`: Generates a separate Angular module for each component. 3. `standalone`: Generates standalone component wrappers. Both `scam` and `standalone` options are compatible with the `dist-custom-elements` output. Note: Please choose the appropriate `outputType` based on your project's requirements and the desired output structure. Defaults to `component`.
`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 for `outputType: "scam"` or `outputType: "standalone"`.
`inlineProperties`	Experimental. When true, tries to inline the properties of components. This is required to enable Angular Language Service to type-check and show jsdocs when using the components in html-templates.

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

Other packages similar to @stencil/angular-output-target

@duetds/stencil-angular-output-target

2.0.1

Duet's fork of Angular output target for @stencil/core components.

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

1.0.1

Angular output target for @stencil/core components.

@didomi/stencil-angular-output-target

0.1.10

Angular output target for @stencil/core components.

@baloise/angular-output-target

1.2.16

Angular output target for @stencil/core components.