@stencil/angular-output-target

property booleanAttributes

booleanAttributes?: boolean;

• When true, boolean properties are declared with an Angular input transform so they can be set using attribute presence syntax:

  <!-- with booleanAttributes enabled -->
  <my-component disabled></my-component>
  
  <!-- otherwise the value has to be bound explicitly -->
  <my-component [disabled]="true"></my-component>

  Without a transform Angular resolves the bare attribute to the empty string and reports Type 'string' is not assignable to type 'boolean' under strictTemplates.

  Compile-time checking of these bindings also requires inlineProperties. Without it the generated wrappers declare no typed members for their inputs, so Angular never checks them and there is no error for the transform to resolve.

  The transform still runs either way, because Angular applies it from the component definition's input map rather than from a declared class member. Enabling this on its own therefore moves boolean coercion from Stencil to the transform with nothing checking what callers pass, so prefer enabling inlineProperties alongside it.

  The transform coerces strings the same way Angular's booleanAttribute does, but passes null and undefined through instead of coercing them to false. Refer to nullableBooleanAttribute.

  Properties are only transformed when Stencil reports their type as exactly boolean. Virtual properties, properties declared as any, and types that union boolean with something else (such as boolean | 'auto', reported as any) get no transform, and the property receives the attribute's empty string rather than true. Only the union case fails to compile; the other two are silent. Refer to the README for the differences.

  false

property componentCorePackage

componentCorePackage: string;

• The package name of the component library. This is used to generate the import statements.

property customElementsDir

customElementsDir?: string;

property directivesArrayFile

directivesArrayFile?: string;

• Optional path to generate a file containing a DIRECTIVES array constant. This is primarily useful with outputType: 'component' (lazy-loaded) where you want to declare all components in a shared NgModule:

  import { DIRECTIVES } from './directives';
  
  @NgModule({
    declarations: [...DIRECTIVES],
    exports: [...DIRECTIVES],
  })
  export class ComponentLibraryModule {}

  This option is less relevant for outputType: 'scam' or 'standalone' where consumers typically import individual component modules or standalone components directly.

property directivesProxyFile

directivesProxyFile: string;

• The path to the proxy file that will be generated. This can be an absolute path or a relative path from the root directory of the Stencil library.

property esModules

esModules?: boolean;

• If true, the output target will generate a separate ES module for each Angular component wrapper. This enables better tree-shaking as bundlers can exclude unused components. This option only applies when outputType is 'scam' or 'standalone' (i.e., using dist-custom-elements). false

property excludeComponents

excludeComponents?: string[];

property inlineProperties

inlineProperties?: boolean;

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

property outputType

outputType?: OutputType;

• The type of output that should be generated. - component - Generate many component wrappers tied to a single Angular module (requires dist, lazy/hydrated approach). - scam - Generate a Single Component Angular Module for each component (requires dist-custom-elements output). - standalone - (default) Generates standalone components (requires dist-custom-elements output).

property transformTag

transformTag?: boolean;

• Use transformTag to generate a build-time script. This script patches Angular @Component selectors in any installed Angular wrapper library enabling run-time tag transformation. Run the script as a postinstall script in your app.

  Setup: 1. Export transformTag and setTagTransformer from your component library:

  // src/index.ts
  export { transformTag, setTagTransformer } from '@stencil/core';

  2. Add the patch script as a postinstall hook in your consuming app's package.json:

  {
    "scripts": {
      "postinstall": "patch-transform-selectors \"(tag) => tag.startsWith('my-') ? `v1-${tag}` : tag\""
    }
  }

  3. Configure the transformer at runtime in your Angular app with the SAME transformer:

  // main.ts
  import { setTagTransformer } from 'component-library';
  setTagTransformer((tag) => tag.startsWith('my-') ? `v1-${tag}` : tag);

  Angular relies on a static selector string so the patch script is used to modify the installed Angular component library for transformed tags. For example, if my-button transforms to v1-my-button, the selector will be patched from selector: 'my-button' to selector: 'v1-my-button'.

  false

property valueAccessorConfigs

valueAccessorConfigs?: ValueAccessorConfig[];

property elementSelectors

elementSelectors: string | string[];

property event

event: string;

property targetAttr

targetAttr: string;

property type

type: ValueAccessorTypes;