Security News
npm Updates Search Experience with New Objective Sorting Options
npm has a revamped search experience with new, more transparent sorting options—Relevance, Downloads, Dependents, and Publish Date.
@stencil/angular-output-target
Advanced tools
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:
For a detailed guide on how to add the angular output target to a project, visit: https://stenciljs.com/docs/angular.
npm install @stencil/angular-output-target
In your stencil.config.ts
add the following configuration to the outputTargets
section:
import { Config } from '@stencil/core';
import { angularOutputTarget } from '@stencil/angular-output-target';
export const config: Config = {
namespace: 'demo',
outputTargets: [
angularOutputTarget({
componentCorePackage: 'component-library',
directivesProxyFile: '../component-library-angular/src/directives/proxies.ts',
directivesArrayFile: '../component-library-angular/src/directives/index.ts',
}),
{
type: 'dist',
esmLoaderPath: '../loader',
},
],
};
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" . |
FAQs
Angular output target for @stencil/core components.
The npm package @stencil/angular-output-target receives a total of 10,534 weekly downloads. As such, @stencil/angular-output-target popularity was classified as popular.
We found that @stencil/angular-output-target demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
npm has a revamped search experience with new, more transparent sorting options—Relevance, Downloads, Dependents, and Publish Date.
Security News
A supply chain attack has been detected in versions 1.95.6 and 1.95.7 of the popular @solana/web3.js library.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.