Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@stencil/angular-output-target

Package Overview
Dependencies
Maintainers
2
Versions
103
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@stencil/angular-output-target

Angular output target for @stencil/core components.

  • 0.7.2-dev.11691677969.1304fff5
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
17K
decreased by-5.83%
Maintainers
2
Weekly downloads
 
Created
Source

@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

npm install @stencil/angular-output-target

Usage

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',
    },
  ],
};

Config Options

PropertyDescription
componentCorePackageThe NPM package name of your Stencil component library. This package is used as a dependency for your Angular wrappers.
directivesProxyFileThe 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.
directivesArrayFileThe 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.
valueAccessorConfigsThe configuration object for how individual web components behave with Angular control value accessors.
excludeComponentsAn 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.
outputTypeSpecifies 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.
customElementsDirThis 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

Package last updated on 10 Aug 2023

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc